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

发布网友发布时间：2022-04-23 02:42

共1个回答

热心网友时间：2022-04-22 20:09

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