CODEWITHSUNDEEP
javascriptvue.jstwo-way
李永博
李永博

Reputation: 3

vue2 how add and observe changes element in array

I can't change child by type something in the input; how to observe the input and make it affected the child . and Verify if there is a name for each child

the 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);
               }
           }    
       })

   })

the html part:

<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>

Upvotes: 0

Views: 596

Answers (1)

PatrickSteele
PatrickSteele

Reputation: 14697

$index has been deprecated in Vue 2.x. Instead, you can assign a variable to the index as part of the v-for directive:

<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>

UPDATED

Ok, I see what you're doing now. You can set the v-model to an expression of the object to bind to. In your case, it's the child element at a specific index so notice how I changed the input's v-model binding to person.children[index].

I also changed the data option to be an object with a single person property. This made the bindings into the children array work.

Here's the complete working jsFiddle.

Upvotes: 1

Related Questions