vue合并两个对象数组
Posted
技术标签:
【中文标题】vue合并两个对象数组【英文标题】:vue merge two arrays of objects 【发布时间】:2020-02-04 15:06:15 【问题描述】:我有 2 个组件:
-
父组件(带有 vue-bootstrap 表的 vue-bootstrap 模式)
子组件(带有表单的 vue-bootstrap 模态)
当我在子组件中提交表单时,我想将对象推送到父表数组,这样就可以了!但是当我重置表单时,它也会重置表数组中的对象,我不知道为什么。我试过push
和concat
。
父变量:
MA02_E_tb // table array [descr_forn: '',fornitore:'',n_oda:'',descr_forn: '',fornitore:'',n_oda:'']
data()
return
form:
descr_forn: 'prova',
fornitore:'prova',
n_oda:'prova',
,
methods:
resetModal()
this.form.descr_forn = '',
this.form.fornitore = '',
this.form.n_oda = '',
,
onSubmit: function(evt)
evt.preventDefault()
this.$parent.MA02_E_tb = this.$parent.MA02_E_tb.concat(this.form)
,
结果:
MA02_E_tb = [descr_forn: 'prova',fornitore:'prova',n_oda:'prova']
当我重新打开子模式并使用 resetModal
方法重置对象表单时,结果是:
MA02_E_tb = [descr_forn: '',fornitore:'',n_oda:'']
form = [descr_forn: '',fornitore:'',n_oda:'']
如果MA02_E_tb
是另一个变量,为什么要重置它?
【问题讨论】:
也许这可以帮助你完成:***.com/questions/31344041/… 您的父变量MA02_E_tb
指向form
,这是通过引用。因此,如果您更改表单,它也会更改指向它的所有变量
您可以更好地从子组件发出事件并根据事件更新您的父组件。
【参考方案1】:
首先,你真的,真的,真的不应该那样使用$parent
。您应该改为发出事件。但这不是造成问题的原因。
实际问题是您通过引用传递对象。如果您随后更改该对象,它将在两个地方都发生更改。无论您使用什么名称、标识符或路径来访问它,它仍然是同一个对象。
假设它是一个平面对象,您可以使用扩展运算符进行浅拷贝,...
:
this.$parent.MA02_E_tb = this.$parent.MA02_E_tb.concat(...this.form)
这将创建一个与this.form
具有相同属性的新对象。重要的是要意识到这只是一个浅拷贝。如果this.form
包含更多引用类型(即对象、数组等),那么这些可能也需要复制。
作为一个事件,这将是这样的:
this.$emit('submit', ...this.form)
然后,您需要在父模板中使用合适的 @submit
侦听器来更新数组。这里的想法是只允许数据的所有者修改它,在这种情况下,该数组归父级所有。
【讨论】:
使用 this.$emit('submit', ...this.form) 完美工作以上是关于vue合并两个对象数组的主要内容,如果未能解决你的问题,请参考以下文章
在数组Vue Js中的另一个不同json对象中具有相同值的数组中的所有json对象中添加/合并新项目