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

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 RESPONSE

this.userEdit = API RESPONSE

}

我能够通过使用另一种方法分配值来避免它，但它并不好

async getUser () {

this.userDetail = API RESPONSE

}

async getUser2 () {

this.userEdit = API RESPONSE

}

感谢您的阅读

Answer 1

您在此处使用 v 绑定指令：。其目的是在变量值更改时更新 DOM。:value="userDetail.name"您必须在 中创建一个新属性，以保存要在文本字段中显示的旧名称。data例如：data() {&nbsp; return {&nbsp; &nbsp; oldName: ''&nbsp; &nbsp; ...&nbsp; }}async getUser () {&nbsp; this.userDetail = API RESPONSE&nbsp; this.oldName = this.userDetail.name}更改为 。:value="userDetail.name":value="oldName"