VueJS View an input field with a preset value

Question

I have a form with multiple information fields, each of these fields are editable, So I created a button that when clicked, the label and the button would hide, then a text box and a save button appears. I want to pre-fill the textbox with the value to be edited.

my template:

      <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>

and my Vue implementation

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

the variable fnameVisible is used to control the visibility of the name/edit field. When I click the edit button, I still get the field empty with no preset value

Neha Neha · Accepted Answer · 2018-07-09T10:31:11

Try Adding value in the field:

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

VueJS View an input field with a preset value

1 Answers