vue从列表中选择一条数据，如何做到每次点击修改弹框都显示数据的本值，而不是上次编辑后没保存的值

Question

父组件将列表中选中的这个object给弹窗组件传进去；弹窗组件内代码：js:props: ['object', 'visible'], computed: {   objectProp(){      return Object.assign({}, this.object)   } },html:   el-input v-model=objectProp.name只要我在外面不对选中的数据进行切换，每次我打开这个弹窗，显示的都是我上次修改的值；如果我选中一条数据，第一次打开弹窗，显示的是数据本值，假如数据本值是1，我修改为2,然后我关闭弹窗，不切换选中的数据，再打开弹窗此时显示的数据是2，而不是1，是上一次修改的值，我想让他显示为数据本值1，该怎么办应该如何解决比较优雅呢，目前我的解决方式是，将visible是否显示弹窗变量作为条件，每次这个值改变objectProp都会重新赋值一次，但是这样的话，我打开弹窗和关闭弹窗都会给这个objectProp重新赋值，完全没有必要，代码很丑陋 objectProp(){    if(!this.visible){      return Object.assign({}, this.object)     }else{      return Object.assign({}, this.object)     }   },

Answer 1

我的思路是，你子组件双向绑定的那个值，不要直接用父组件传给他的，弹窗打开的时候，做一个动作，就是声明一个新的值，然后把父组件的值传给他（需要深复制），然后你子组件就直接绑定新声明的那个值；然后弹窗关闭的时候，如果是保存关闭，那就把你新声明的那个值传给父组件，让父组件去更新这个值，就是vue的自定义事件，$emit和$on；如果是未保存关闭，那么久不用做任何其他操作，直接关闭子组件就好了。