I am trying to push an array of objects into the answers array. I’ve used forEach() to clear every value property after the push, however the value properties inside the answers array are also getting cleared. Why is it doing this?
I’ve even tried cloning the array using .map() but it does exactly the same thing. Where am I going wrong? Thanks in advance.
new Vue({
el: '#app',
data() {
return {
elements: [{
title: "Type",
interfaceKey: "SpecifiedItemType",
component: "Input",
value: "", // typed text
},
{
title: "Desc",
interfaceKey: "SpecifiedItemDescription",
component: "Input",
value: "", // typed text
},
{
title: "Value",
interfaceKey: "SpecifiedItemValue",
component: "Input",
value: "", // typed text
},
],
answers: [],
};
},
methods: {
reset() {
const newArray = this.elements.map((item) => item);
this.answers.push(newArray);
this.elements.forEach((item) => (item.value = ""));
},
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for=" (e, index) in elements ">
<div :key="index ">
<input type="text " v-model="elements[index].value " />
</div>
</template>
<button @click="reset ">reset</button>
<div>
{{ answers }}
</div>
</div>
>Solution :
What you were missing was to make a deep copy of the object, otherwise it will be linked to the input values.
new Vue({
el: '#app',
data() {
return {
elements: [{
title: "Type",
interfaceKey: "SpecifiedItemType",
component: "Input",
value: "", // typed text
},
{
title: "Desc",
interfaceKey: "SpecifiedItemDescription",
component: "Input",
value: "", // typed text
},
{
title: "Value",
interfaceKey: "SpecifiedItemValue",
component: "Input",
value: "", // typed text
},
],
answers: [],
};
},
methods: {
reset() {
const newArray = []
this.elements.forEach(elem => {
newArray.push({...elem});
elem.value = ''
})
this.answers.push(newArray)
},
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for="(e, index) in elements">
<div :key="index">
<input type="text" v-model="elements[index].value" />
</div>
</template>
<button @click="reset">reset</button>
<div>
{{ answers }}
</div>
</div>