Vue关于数组push时覆盖之前数据的问题
然后在TransferInfo.vue中使用到了封装的dialog组件以及一个用于显示用户填写数据的表单组件。首先用户点击新增会打开这个dialog并且可以填写所需数据,当用户点击dialog中保存按钮时,我们会通过注册的点击事件对TransferInfo.vue传值。并且再次通过Vue的props向表单组件传送需要显示的数据,表单组件会通过v-for遍历,显示用户新增次数的数据。但是我们发现,当
问题复现:
我们封装封装了一个TransferInfo.vue的组件,并且在App.vue中引入他。然后在TransferInfo.vue中使用到了封装的dialog组件以及一个用于显示用户填写数据的表单组件。首先用户点击新增会打开这个dialog并且可以填写所需数据,当用户点击dialog中保存按钮时,我们会通过注册的点击事件对TransferInfo.vue传值。
submitForm() {
this.$emit('showInfo', this.form)
this.dialogShow = false
},
它通过this.$emit注册了一个事件,并且在TransferInfo.vue中使用它。它可以获得一个形参用户接收dialog组件中传过来的值。
showInfo(e) {
this.info.push(e)
},
我们在data中定义了一个变量名为info的数组,并且通过push使dialog组件中传过来的值能存入进去。并且再次通过Vue的props向表单组件传送需要显示的数据,表单组件会通过v-for遍历,显示用户新增次数的数据。
<flyInfo :info="info" @delData="delData"></flyInfo>
此时数据处于正常传入表单组件并且可以正常显示的状态。
但是我们发现,当用户新增第二条数据的时候,那么第一条数据中的值会被第二条数据中的值覆盖。
解决办法:
方法一:
showInfo(e) {
this.info.push(JSON.parse(JSON.stringify(e)))
},
这里使用深拷贝创建一个新对象,它与该对象与原对象完全独立,即使修改新对象也不会影响到原对象。
方法二:
showInfo(e) {
this.info.push(toRaw(e))
},
这里使用toRaw获取原始对象,普通对象被push是新增一个存储,跟原对象没关系
更多推荐
所有评论(0)