今天做一个VUE的数组元素删除操作,使用的是splice.
然而运行后发现一直提示"cannot read property 'splice' of undefined".代码如下:
new Vue({
el:'#app',
data:{
items:[
{name:"test1",val:2},
{name:"test2",val:3},
{name:"test3",val:4},
]
},
methods:{
reduce:function(){
this.items.forEach(function(item,index){
item.val-=1;
if(item.val==0){
this.items.splice(index,1);
}
})
console.log(this.items);
}
},
以上代码运行后,一直提示"cannot read property 'splice' of undefined",经过排查,原来是由于forEach里面的this指向已经不是vue实例造成的.
修改代码如下:
new Vue({
el:'#app',
data:{
items:[
{name:"test1",val:2},
{name:"test2",val:3},
{name:"test3",val:4},
]
},
methods:{
reduce:function(){
var that=this;
that.items.forEach(function(item,index){
item.val-=1;
if(item.val==0){
that.items.splice(index,1);
}
})
console.log(that.items);
}
},
以上代码运行成功!
