我有两个组件:
- 父组件(带有 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
?
最佳答案
首先,您真的、真的、真的不应该那样使用 $parent
。您应该发出一个事件。但这不是导致问题的原因。
实际问题是您通过引用传递对象。如果您随后更改该对象,它将在两个地方都发生更改。无论您使用什么名称、标识符或路径来访问它,它仍然是同一个对象。
假设它是一个平面对象,您可以使用扩展运算符制作一个浅拷贝,...
:
this.$parent.MA02_E_tb = this.$parent.MA02_E_tb.concat({...this.form})
这将创建一个与 this.form
具有相同属性的新对象。重要的是要认识到这只是一个浅拷贝。如果 this.form
包含更多引用类型(即对象、数组等),那么这些也可能需要复制。
作为一个事件,这将是这样的:
this.$emit('submit', {...this.form})
然后您需要在父模板中使用合适的 @submit
监听器来更新数组。这里的想法是只允许数据的所有者修改它,在这种情况下,该数组由父级拥有。
关于javascript - vue合并两个对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58267523/