Javascript VueJS使用预设值查看输入字段

我有一个包含多个信息字段的表单，每个字段都是可编辑的，因此我创建了一个按钮，单击该按钮时，标签和按钮将隐藏，然后出现一个文本框和一个保存按钮。 我想用要编辑的值预先填充文本框

我的模板：

      <b-form-row>
    <b-col md="6" >
      <b-form-group id="firstName-label" label="First name:" label-for="firstName"> 
      <b-form-group id="firstName" v-if="fnameVisible">{{ user.surName }} <button @click="editFirstName">edit</button> </b-form-group>
      <div v-if="!fnameVisible"><input type="text" ref="newFirstName" ><button @click="submitFirstName">Save</button></div>
      </b-form-group>

变量

fnameVisible

用于控制名称/编辑字段的可见性。

---

单击编辑按钮时，字段仍然为空，没有预设值

请尝试在字段中添加值：

 <b-form-group id="firstName" v-if="fnameVisible" :value="user.surName">{{ 
       user.surName }} <button @click="editFirstName">edit</button> </b-form-group>

{
user.name}}编辑

 <b-form-group id="firstName" v-if="fnameVisible" :value="user.surName">{{ 
       user.surName }} <button @click="editFirstName">edit</button> </b-form-group>