vuejs2.0 多维数组操作?
不知道为什么vue操作多维数组的时候,删除一个,所有的删除掉了.
html 如下
<div class="form-group" v-for='(tech,fatherIndex) in techs'>
<tr v-for='(item,childIndex) in tech.items' @remove='console.log(childIndex)'>
<td>
<input type='checkbox' v-bind:true-value="2" v-bind:false-value="1" v-model='item.outside'>
</td>
<td>
<a @click="$emit('remove')" class='btn btn-danger'>移除</a>
<a @click="createItem(fatherIndex)" class='btn btn-success'>{{fatherIndex}} - {{childIndex}}新增</a>
</td>
</tr>
</div>
js代码如下
var app = new Vue({
el: '#techs',
data: {
catTpl : {
catId:0,
items:[
{
techId:0,
deviceId:0,
skillId:0,
receiveMemo:'',
workingMemo:'',
finishMemo:'',
ousite:1,
check:1
}
],
},
itemTpl : {
techId:0,
deviceId:0,
skillId:0,
receiveMemo:'',
workingMemo:'',
finishMemo:'',
ousite:1,
check:1
},
catId:100,
itemId:1000,
techs : [
{
catId:1,
items:[
{
techId:1,
deviceId:1,
skillId:1,
receiveMemo:'',
workingMemo:'',
finishMemo:'',
outside:1,
check:1
},
]
},
]
},
methods: {
addCategory:function(){
this.techs.push(this.catTpl)
},
removeCategory:function(fatherIndex){
this.techs.splice(fatherIndex,1)
},
removeItem:function(fatherIndex,sonIndex){
this.techs[fatherIndex].items.splice(sonIndex,1)
},
createItem:function(fatherIndex){
this.techs[fatherIndex].items.push(this.itemTpl)
}
}
})
父类的增减没有问题, 但是在父类下面增加子类的时候, 除了初始化的techs数据,增加的都会同步操作,如在console 运行如下代码 app.techs[1].items.push(this.itemTpl) ,所有的动态添加的父类都会自动加上一个子类。
app.techs[1].items.splice(sonIndex,1) 所有动态父类下的子类都会删除这个对象。
请问这是什么原因, 先行谢过!
父类和子类都在上面注明了. 之前可能说的不大清楚
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
因为你的push操作的和splice操作的都是同一个对象
求助啊 ,自己顶一下
来个在线例子吧 没明白你的问题点在哪
按你给的代码 跟你的问题没啥逻辑关系
请问楼主解决了么,我也遇见了一样的问题,能否解答一下