Dealing with a form containing various editable fields, I devised a solution. By incorporating a button, clicking it would conceal the label and button itself, while revealing a text box alongside a save button. The challenge lays in pre-filling the textbox with the designated value for editing.
Here's my template layout:
<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 below is my Vue script implementation
editFirstName() {
this.fnameVisible = !this.fnameVisible;
this.$nextTick(() => this.$refs.newFirstName.focus());
this.$refs.newFirstName = this.user.givenName;
}The variable fnameVisible plays a crucial role in toggling the visibility of the name/edit field. However, upon clicking the edit option, the input field tends to remain empty without the preset value reflecting.