How to update dynamic variable in array after change VUE-CodePudding

I search best way to automatically update my array "doors". But I cant understand what I must computed or watch.
Its example what I want
PageA.vue

<div id="page-a">
  <div   
        v-for="door in doors"
        :key="door.id">

    <div >{{door.model}}</div>
  </div>
</div>

<script>
  export default {
    data() {
      return {
        firstDoorModel:"018",
        secondDoorModel:"015",
        doors: [    
         {model:firstDoorModel,
          id:"1"},
         {model:secondDoorModel,
          id:"2"}]
      }
    },
    methods: {
      changeModel(){
        this.firstDoorModel="012"
        this.secondDoorModel="010"
      }
    }

CodePudding user response：

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  
       v-for="door in doors"
       :key="door.id"
  >
    <div >{{ door.model }}</div>
  </div>
  <button @click="changeModel(['012', '010'])">Change</button>
</div>

CodePudding user response：

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>