vue2如何添加和观察数组中的变化元素

Question

我无法通过在输入中键入内容来更改 child；如何观察输入并使其影响 child 。并验证每个 child

是否有名称

js:

     $(function () {
       var person = {
           name: '',
           children: ['Please enter a name']
       }

       var vm = new Vue({
           el: "#example",
           data: person,
           methods: {
               addChild: function (index) {
                   this.children.splice(index+1, 0, ""); //
               },
               removeChild: function (index) {
                   this.children.splice(index , 1)
               },
               getData: function () {
                   console.log(this.children);
               }
           }    
       })

   })

html部分：

<ul >
    <li v-for="(child,index) in children">
        the child at <span>{{ index }}</span> is <span >{{ child }}</span>
        <input v-model = "child">
        <button @click="addChild(index)">newChild</button>
        <button v-on:click="removeChild(index)">X</button>

    </li>
</ul>
    <button v-on:click="getData">watch data</button>
    <div>{{ $data | json }} </div>

</div>

Answer 1

$index 有 been deprecated in Vue 2.x。相反，您可以将变量分配给索引作为 v-for 指令的一部分：

<li v-for="(child,index) in person.children">
    the child at <span>{{ index }}</span> is <span >{{ child }}</span>
    <input v-model = "person.children[index]">
    <button @click="addChild(index)">newChild</button>
    <button v-on:click="removeChild(index)">X</button>
</li>

已更新

好的，我明白你现在在做什么了。您可以将 v-model 设置为要绑定到的对象的表达式。在您的情况下，它是特定索引处的子元素，因此请注意我如何将 input 的 v-model 绑定更改为 person.children[index].

我还将 data 选项更改为具有单个 person 属性的对象。这使得对子数组的绑定工作。

这是 complete working jsFiddle。

vue2如何添加和观察数组中的变化元素

vue2 how add and observe changes element in array

javascript

two-way

vue.js