为不同的模型分配相同的值，它们协同工作

Question

我很抱歉，如果有一个不恰当的表达，因为它是谷歌翻译我想知道解决方案或解决方法我试图在nuxt + vue + vuetfy环境中实现以下目标・使用API获取用户信息并在屏幕上显示・按下编辑按钮时，将显示一个对话框并编辑用户信息・但是，如果您更改编辑屏幕上的值，则背面的显示也会一起更改。<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 RESPONSEthis.userEdit = API RESPONSE}我能够通过使用另一种方法分配值来避免它，但它并不好async getUser () {this.userDetail = API RESPONSE}async getUser2 () {this.userEdit = API RESPONSE}感谢您的阅读

Answer 1

您在此处使用 v 绑定指令：。其目的是在变量值更改时更新 DOM。:value="userDetail.name"

您必须在 中创建一个新属性，以保存要在文本字段中显示的旧名称。data

例如：

data() {

  return {

    oldName: ''

    ...

  }

}

async getUser () {

  this.userDetail = API RESPONSE

  this.oldName = this.userDetail.name

}

更改为 。:value="userDetail.name":value="oldName"