JavaScript add object to existing object

Question

I have some problems adding object to object, or to be more specific array of objects. I'm using vue and I need to add some objects to specific array, and need to specify a key, but push function is not working as needed. So I find a function splice and I'm using it in function like:

addPackageInfo: function (index) {
            this.form.packages.splice(index, 0, {
                info: {
                    country: index,
                    real_price: '',
                    sale_price: '',
                    delivery_price: ''
                }
            });
        },

But it's doing something that I don't need, it will delete other data (objects) and replace it with given one. Is there any way so I can just append that objects?

Answer 1

In your codepen the problem is that you are using the same array for parents and children, so both addParent and addChildren function edit the same array.

addParent: function () {
            this.form.parent.push({
                name: '',
                age: '',
            });
        },

addChildren: function (index) {
          console.log(index);
          this.form.parent.splice([index], 0, {
               child: {
                  name: '',
                  school: '',
               }
          });
        },

I think that what you want is that for each item in parents array there is an array of children. Try out this pen and let me know if I correctly understand your problem