VueJS 查看具有预设值的输入字段答案

【问题标题】：VueJS View an input field with a preset valueVueJS 查看具有预设值的输入字段
【发布时间】：2018-12-16 23:29:18
【问题描述】：

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

我的模板：

      <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 用于控制名称/编辑字段的可见性。当我单击编辑按钮时，该字段仍然为空，没有预设值

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

尝试在字段中添加值：

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

【讨论】：