I'm facing a challenge with adding an array of objects to an existing array of objects using Vue.js. What I'm attempting to accomplish is creating a form repeater within another form repeater. While I was able to successfully implement the first one, the second one is proving to be quite daunting.
I have experimented with splice and push functions, but they are not producing the desired outcome. In the function for the initial form repeater (which is functioning properly), 'parent' is defined as an array in the state.
addParent: function () {
this.form.parent.push({
name: '',
age: '',
});
},
The output currently looks like this:
parent: [
{
name: 'My name',
age: 32,
}
]
Now, what I need is to add a child object to this structure, making it look like:
parent: [
{
name: 'My name',
age: 32,
child: [
{
name: 'My children',
school: 'Elementary'
}
]
}
]
I've been trying to achieve this by utilizing the following approach:
addChildren: function (index) {
this.form.parent.splice([index], 0, {
child: {
name: '',
school: '',
}
});
}
Despite my efforts, this method hasn't been successful, as it ends up adding a new array of parents and a child object. I also attempted another strategy:
addChildrenSecondTry: function (index) {
var dd = [];
dd[index] = {
child: {
name: '',
school: '',
}
};
this.form.packages.splice([index], 0, dd);
}
Unfortunately, neither of these approaches has yielded the desired results. I explored options such as push while passing a key from a parent, but encountered errors stating that push is not a function.
If you'd like to further investigate my issue, feel free to visit this CODEPEN example I created to provide more clarity on my situation.