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>

以及我的Vue实现

    editFirstName() {
  this.fnameVisible = !this.fnameVisible;
   this.$nextTick(() => this.$refs.newFirstName.focus());
   this.$refs.newFirstName = this.user.givenName;
}

变量 fnameVisible 用于控制名称/编辑字段的可见性。 当我单击编辑按钮时,仍然会使字段为空,没有预设值