Vue.js why is my array values being cleared?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

By using the .map() function you are making a shallow copy. The new array is still refencing the original array. To make a copy without any references you can use the following code:

const newArray = JSON.parse(JSON.stringify(this.answers));