How can i make an input field not update all other instances of it? - vuejs2

Question

i am strting to play with Vue and i was wondering how i can update only the current edited text input value instead of updating all instances of it? I know it must be about the v-model , but i am a bit lost here.
Here is my code for the component :
Vue.component('app-list', {
template: '<section id="app-item-field" class="columns is-multiline">' +
' <div class="column is-2" v-for="(list, index) in lists" >' +
' <h2>{{list.title}}</h2>' +
' <div class="field has-addons">' +
' <input class="input is-small is-info" type="text" v-model="inputVal" placeholder="Nom de l\'item à ajouter">' +
' <a class="button is-info is-small" :disabled="initValueIsSet === false" #click="addListItem(index)">Ajouter</a>' +
' </div>' +
' <app-list-items :items="list.items"></app-list-items>' +
' </div>' +
' </section>',
props: ['lists'],
data: function () {
return {
inputVal: null
}
},
computed: {
initValueIsSet: function () {
if (this.inputVal === null) {
return false;
} else {
return this.inputVal.length > 0;
}
}
},
methods: {
addListItem: function (index) {
if (this.initValueIsSet) {
this.$emit('new-list-item', index, this.inputVal, "http://www.google.ca");
this.inputVal = "";
}
}
}
});
Thank you in advance!

Answer 1

The simplest solution is to turn inputVal into an array:
data: function () {
return {
inputVal: []
}
},
And use index from v-for to access it in the v-model. Template:
<input class="input is-small is-info" type="text" v-model="inputVal[index]" placeholder="Nom de l\'item à ajouter">'
Also update the methods.
Demo:
Vue.component('app-list-items', {
template: '<span></span>'
});
Vue.component('app-list', {
template: '<section id="app-item-field" class="columns is-multiline">' +
' <div class="column is-2" v-for="(list, index) in lists" >' +
' <h2>{{list.title}}</h2>' +
' <div class="field has-addons">' +
' <input class="input is-small is-info" type="text" v-model="inputVal[index]" placeholder="Nom de l\'item à ajouter"> {{ inputVal[index] }}' +
' <a class="button is-info is-small" :disabled="initValueIsSet(index) === false" #click="addListItem(index)">Ajouter</a>' +
' </div>' +
' <app-list-items :items="list.items"></app-list-items>' +
' </div>' +
' </section>',
props: ['lists'],
data: function () {
return {
inputVal: []
}
},
methods: {
initValueIsSet: function (index) {
if (this.inputVal[index] === null || this.inputVal[index] === undefined) {
return false;
} else {
return this.inputVal[index].length > 0;
}
},
addListItem: function (index) {
if (this.initValueIsSet(index)) {
this.$emit('new-list-item', index, this.inputVal[index], "http://www.google.ca");
Vue.set(this.inputVal, index, ""); // https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
}
}
}
});
new Vue({
el: '#app',
data: {
lists: [{title: 'ana', items: []}, {title: 'bob', items: []}]
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<app-list :lists="lists"></app-list>
</div>
Since inputVal is now an array, the computed initValueIsSet is now parameterized by the index. As computeds don't take arguments, we turned it into a method.