Question

我正在努力与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 = "";
            }
        }
    }
});

提前谢谢！

Answer 1

最简单的解决方案是将inputVal转换为数组：

data: function () {
    return {
        inputVal: []
    }
},

并使用index中的v-for在v-model中访问它。模板：

<input class="input is-small is-info" type="text" v-model="inputVal[index]" placeholder="Nom de l\'item à ajouter">'

同时更新方法。

<强>演示：

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>

由于inputVal现在是一个数组，因此计算出的initValueIsSet现在由索引参数化。由于计算不带参数，我们把它变成了一个方法。

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

1 个答案: