本篇内容主要讲解“如何解决Vue不能监听数组变化”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何解决Vue不能监听数组变化”吧!
一、vue监听数组
二、vue无法监听数组变化的情况
vue实际上可以监听数组变化,比如
data () {
return {
watchArr: [],
};
},
watchArr (newVal) {
console.log('监听:' + newVal);
},
created () {
setTimeout(() => {
this.watchArr = [1, 2, 3];
}, 1000);
},
在比如使用splice(0,2,3)从数组下标0删除两个元素,并在下标0插入一个元素3
data () {
return {
watchArr: [1, 2, 3],
};
},
watchArr (newVal) {
console.log('监听:' + newVal);
},
created () {
setTimeout(() => {
this.watchArr.splice(0, 2, 3);
}, 1000);
},
push数组也能够监听到。
但是数组在下面两种情况下无法监听
利用索引直接设置数组项时,例如arr[indexofitem]=newValue
修改数组的长度时,例如arr.length=newLength
举例无法监听数组变化的情况
1、利用索引直接修改数组值
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('监听:' + newVal);
},
created () {
setTimeout(() => {
this.watchArr[0].name = 'xiaoyue';
}, 1000);
},
2、修改数组的长度
长度大于原数组就将后续元素设置为undefined
长度小于原数组就将多余元素截掉
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('监听:' + newVal);
},
created () {
setTimeout(() => {
this.watchArr.length = 5;
}, 1000);
},
到此,相信大家对“如何解决Vue不能监听数组变化”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。