javascript - vue 怎么绑定一个数组的内容，并且是数组的未来元素也产生绑定

问题描述

问 题

数组双向绑定失效，的未来元素绑定失效，以及$index未定义怎么解决

<div id="example">
<div><input type="text" v-model="name"></div>
<ul >
    <li v-for="(child,index) in children">
        <span >{{ child }}</span>
        <input v-model = "child">
        <button @click="addChild(index)">新增</button>
        <button v-on:click="removeChild(index)">X</button>

    </li>


</ul>
    <button @click="getData">输出</button>
</div>

在child输入框中输入字符能改变第一个元素 的内容 ，但是后来增加的未来元素的内容不会改变

 $(function () {


       var person = {
           name: '',
           children: [{name:""}]

       }

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

       })
       $('.btn').click(function () {
           person.name = "asdf";
       })
   })

解决方案

外国友人给出了答案 https://jsfiddle.net/psteele/...

这篇关于javascript - vue 怎么绑定一个数组的内容，并且是数组的未来元素也产生绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！