[Vuejs]-Why does it change all values for me every time I add an element to the array?

by

1👍

✅

You can assign the response in an object inside the iteration and pass that in the this.ar. Try this way :

const URL = "https://randomuser.me/api/";
new Vue({
  el: '#app',
  data() {
    return {
      ar: {
        name: "",
        surname: "",
        gender: "",
      },
      userArray: [],
    }
  },
  methods: {
    post() {
      axios.get(URL).then((r) => {
        arr = r.data.results;
        arr.forEach((element) => {
          let obj = {};
          obj.name = element.name.first;
          obj.surname = element.name.last;
          obj.gender = element.gender;
          this.ar = obj;
          this.userArray.push(obj);
        });
      })
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<div id="app">
  <button @click="post()">POST</button>
  <h1>{{ar.name}} {{ar.surname}} {{ar.gender}}</h1>
  <br />
  <hr />
  <div v-for="(value, index) in userArray" :key="index">
    <span> {{index}} {{value}} </span>
  </div>
</div>
👤Debug Diva

2👍

You have a pointer reference issue. You actually add the same object pointer several times to the array, i.e. the same object reference:

Explaination of the problem

const obj = { name: 'ref1' };

const array = [];
array.push(obj);
array.push(obj);
array.push(obj);

// array === [{ name: 'ref1' }, { name: 'ref1' }, { name: 'ref1' }]
// which is actually [$objRef1, $objRef1, $objRef1] where $objRef1 is a pointer to the object address.

// when you updates the object,
obj.name = 'Hello'

// you still have array = [$objRef1, $objRef1, $objRef1] where $objRef1 all referes to this object: { name: 'Hello' }
// array === [{ name: 'Hello' }, { name: 'Hello' }, { name: 'Hello' }]

Solution:

You have to create a new object on every iteration, so they all are distinct object which a distinct address (pointer).

await axios
  .get("https://randomuser.me/api/")
  .then((r) => {
    const arr = r.data.results;
    arr.forEach((element) => {
       const item = {
          name: element.name.first,
          surname: element.name.last,
          gender: element.gender,
       };
       this.ar = item // refers to the new created item
       this.array.push(item);
     });
   }).catch((err) => {
      console.log("Error " + err);
   });
👤Kapcash

Leave a comment