I want to assign a constant in an array to a variable and after changing this variable, the constant is updated with the new value of the variable.
But I cant understand what I must computed or watch.
Its example what I want
PageA.vue
<div id="page-a">
<div class="card"
v-for="door in doors"
:key="door.id">
<div class="modelName">{{door.model}}</div>
</div>
</div>
<script>
export default {
data() {
return {
firstDoorModel:"018",
secondDoorModel:"015",
doors: [
{model:firstDoorModel,
id:"1"},
{model:secondDoorModel,
id:"2"},
{model:firstDoorModel
id:"3"}]
}
},
methods: {
changeModel(){
this.firstDoorModel="012"
this.secondDoorModel="010"
}
}
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>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>