Question

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

我的模板：

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

Answer 1

尝试在字段中添加值：

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

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

1 个答案: