Vue.js why is my array values being cleared?

Question

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>

RenaudC5 · Accepted Answer · 2022-04-19 14:50:37Z

1

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>

edited Apr 19, 2022 at 14:50

answered Apr 19, 2022 at 14:42

RenaudC5

3,8591 gold badge13 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mjwals Over a year ago

Sorry, but this did not work as the value properties inside the answers array now equal an empty string instead of being the value the user typed

RenaudC5 Over a year ago

Yeah sorry i've updated, might works now

mjwals Over a year ago

Awesome works, thanks for your help :)

BBroerse · Accepted Answer · 2022-04-19 14:46:18Z

1

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));

answered Apr 19, 2022 at 14:46

BBroerse

112 bronze badges

2 Comments

danh Over a year ago

developer.mozilla.org/en-US/docs/Web/API/structuredClone

kissu Over a year ago

I recommend deepClone from lodash, less bugs overall.

Collectives™ on Stack Overflow

Vue.js why is my array values being cleared?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related