[Vuejs]-How to update dynamic variable in array after change VUE

by

0👍

If I understood you correctly, try like following:

new Vue({
  el: "#page-a",
  data()   {
    return{
      doors: [{model: "", id: "1"}, {model: "", id: "2"}]
    }
  },
  methods: {
    changeModel(arr){
      for (let i = 0; i < this.doors.length; i++) {
        this.doors[i].model = arr[i]
      }
    }
  },
  mounted() {
    this.changeModel(["018", "015"])
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="page-a">
  <div class="card" 
       v-for="door in doors"
       :key="door.id"
  >
    <div class="modelName">{{ door.model }}</div>
  </div>
  <button @click="changeModel(['012', '010'])">Change</button>
</div>

0👍

Working Demo :

const app = new Vue({
  el: '#app',
  data() {
    return {
      doors: [{
        model: '018',
        id: '1'
      }, {
        model: '015',
        id: '2'
      }]
    }
  },
  methods: {
    changeModel(inputModelArr) {
        if (inputModelArr.length !== this.doors.length) {
       return;
      }
        this.doors.forEach((door, index) => {
        door.model = inputModelArr[index]
      });
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="door in doors" :key="door.id">
    {{ door.model }}
  </div><br>
  <button v-on:click="changeModel(['10', '20'])">Change Book Model</button>
</div>

Leave a comment