微客导航 » 文章资讯 » vue计算属性无法监听到数组内部变化的解决方案

vue计算属性无法监听到数组内部变化的解决方案

2023-08-09 19:56:04 174

vue的计算属性

计算属性可以帮助我们简化代码，做到实时更新，不用再自己添加function去修改data。

首先看一下计算属性的基本写法(摘自官网)

varvm=newVue({
el:'#demo',
data:{
firstName:'Foo',
lastName:'Bar'
},
computed:{
fullName:function(){
returnthis.firstName+''+this.lastName
}
}
})

这样我们在模版里这样引入computed属性就可以了，他的效果个data一样

{{fullName}}

这样我们修改firstName或者lastName，fullName都会同步更新

这里我们主要不是讲这个,而是讲如果把firstName和lastName放在一个数组里

比如这样[firstName,lastName]

如果这时候修改数组中的一项会不会有相同的效果呢？

修改一下代码

varvm=newVue({
el:'#demo',
data:{
nameArray:['Foo','Bar']
},
computed:{
fullName:function(){
returnthis.nameArray[0]+''+this.nameArray[1]
}
}
})

methods:{
change(){
this.nameArray[0]='123'
}

触发change方法可见fullName并没有变化。原因可能是vue没有监听到数组nameArray的长度变化。

此时我们可以采用splice让数组的长度有个变化，这时候vue就可以监听到了

this.nameArray.splice(0,1,'123')

或者使用vue的$set方法

this.$set(this.nameArray,0,'123')

还有一点要注意，就是如果这个计算属性没有使用过，也就是说页面中没有引用，也没有其他变量使用他，同样不会触发计算属性。至少，来个console打印一下也行

以上这篇vue计算属性无法监听到数组内部变化的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue计算属性无法监听到数组内部变化的解决方案

热门推荐

随机推荐