Assign the same value to different models, they work together

Question

I'm sorry if there is an inappropriate expression because it is Google translation

I want to know a solution or workaround

I am trying to achieve the following in nuxt + vue + vuetfy environment

・Get user information using API and display it on the screen

・When you press the edit button, a dialog is displayed and user information is edited

・However, if you change the value on the edit screen, the display on the back also changes together.

<v-text-field label="name" readonly :value="userDetail.name"/>

<v-dialog v-model="dialog">
  <v-text-field label="name" v-model="userEdit.name"/>
</v-dialog>

async getUser () {
this.userDetail = API RESPONSE
this.userEdit = API RESPONSE
}

I was able to avoid it by assigning a value with another method, but it is not good

async getUser () {
this.userDetail = API RESPONSE
}
async getUser2 () {
this.userEdit = API RESPONSE
}

Thanks for reading

Answer 1

You using the v-bind directive here: :value="userDetail.name" . It's purpose is to update the DOM whenever the value of the variable changes.

You'll have to create a new property in data to save the old name that you want to display in the text field.

For example:

data() {
  return {
    oldName: ''
    ...
  }
}

async getUser () {
  this.userDetail = API RESPONSE
  this.oldName = this.userDetail.name
}

Change :value="userDetail.name" to :value="oldName" .