Home Why does it change all values for me every time I add an element to the array?

Questions

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

May 22, 2022

Every time I add an element it automatically replaces all the others but this happens to me only if I insert the whole object if I insert a classic element an integer a string works without problems.

 <body>
    <div id="app">
      <button @click="post()">POST</button>
      <h1>{{ar.name}} {{ar.surname}} {{ar.gender}}</h1>
      <br />
      <hr />
      <div v-for="(value, index) in array">
        <text>{{index}} {{value}} </text>
      </div>
    </div>

    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      let app = Vue.createApp({
        data: function () {
          return {
            ar: {
              name: "",
              surname: "",
              gender: "",
            },
            array: [],
          };
        },
        methods: {
          async post() {
            await axios
              .get("https://randomuser.me/api/")
              .then((r) => {
                arr = r.data.results;
                arr.forEach((element) => {
                  this.ar.name = element.name.first;
                  this.ar.surname = element.name.last;
                  this.ar.gender = element.gender;
                  this.array.push(this.ar);
                });
              })
              .catch((err) => {
                console.log("Error " + err);
              });
          },
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

first element insert

second element insert

>Solution :

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>