Vuejs2 如何使输入字段不更新其所有其他实例？

我正在尝试使用Vue，我想知道如何只更新当前编辑的文本输入值，而不是更新它的所有实例？我知道一定是关于v型车的，但我在这里有点迷路了

以下是我的组件代码：

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 = "";
            }
        }
    }
});

Vue.component（'app-list'{
模板：“”+
'               ' +
“{{list.title}}”+
'                   ' +
'                       ' +
“Ajouter”+
'                   ' +
'                   ' +
'               ' +
'           ',
道具：[“列表”]，
数据：函数（）{
返回{
inputVal:null
}
},
计算：{
initValueIsSet:函数（）{
if（this.inputVal==null）{
返回false；
}否则{
返回this.inputVal.length>0；
}
}
},
方法：{
addListItem:函数（索引）{
if（this.initValueIsSet）{
此.emit（'new-list-item'，索引，this.inputVal，'http://www.google.ca");
this.inputVal=“”；
}
}
}
});

---

提前谢谢你

最简单的解决方案是将

inputVal

转换为数组：

数据：函数（）{
返回{
输入值：[]
}
},

并使用

v-for

中的

index

在

v-model

中访问它。模板：

'

同时更新方法

演示：

Vue.component（'app-list-items'{
模板：“”
});
Vue.组件（“应用程序列表”{
模板：“”+
'               ' +
“{{list.title}}”+
'                   ' +
“{{inputVal[index]}”+
“Ajouter”+
'                   ' +
'                   ' +
'               ' +
'           ',
道具：[“列表”]，
数据：函数（）{
返回{
输入值：[]
}
},
方法：{
initValueIsSet:函数（索引）{
if（this.inputVal[index]==null | | this.inputVal[index]==未定义）{
返回false；
}否则{
返回此.inputVal[index].length>0；
}
},
addListItem:函数（索引）{
if（此.initValueIsSet（索引））{
此.emit（'new-list-item'，索引，此.inputVal[index]，”http://www.google.ca");
Vue.set（this.inputVal，索引为“”）；//https://vuejs.org/v2/guide/reactivity.html#Change-检测注意事项
}
}
}
});
新Vue({
el:“#应用程序”，
数据：{
列表：[{title:'ana'，项目：[]}，{title:'bob'，项目：[]}]
}
})

---

这太棒了，我朝着正确的方向倾斜，但没有将计算值更改为方法。这就成功了，谢谢