vue style 绑定数组怎么绑定

发布网友

我来回答

共1个回答

热心网友

数组双向绑定失效，的未来元素绑定失效，以及$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
}
}