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；如果是未保存关闭，那么久不用做任何其他操作，直接关闭子组件就好了。