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

父组件将列表中选中的这个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)
    }
  },


函数式编程
浏览 6662回答 1
1回答

达令说

我的思路是,你子组件双向绑定的那个值,不要直接用父组件传给他的,弹窗打开的时候,做一个动作,就是声明一个新的值,然后把父组件的值传给他(需要深复制),然后你子组件就直接绑定新声明的那个值;然后弹窗关闭的时候,如果是保存关闭,那就把你新声明的那个值传给父组件,让父组件去更新这个值,就是vue的自定义事件,$emit和$on;如果是未保存关闭,那么久不用做任何其他操作,直接关闭子组件就好了。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Vue.js