vue计算属性无法监听到数组内部变化的解决方案
更新时间：2019年11月06日 09:57:56 作者：张啸zx
今天小编就为大家分享一篇vue计算属性无法监听到数组内部变化的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue的计算属性
计算属性可以帮助我们简化代码，做到实时更新，不用再自己添加function去修改data。
首先看一下计算属性的基本写法(摘自官网)
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
这样我们在模版里这样引入computed属性就可以了，他的效果个data一样
<div id="demo">{{ fullName }}</div>
这样我们修改firstName或者lastName，fullName都会同步更新
这里我们主要不是讲这个,而是讲如果把 firstName和lastName放在一个数组里
比如这样[firstName ,lastName]
如果这时候修改数组中的一项会不会有相同的效果呢？
修改一下代码
var vm = new Vue({
el: '#demo',
data: {
nameArray:['Foo' ,'Bar']
},
computed: {
fullName: function () {
return this.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计算属性无法监听到数组内部变化的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何使用Vue实现简单的信号和电池电量组件效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-04-04
Arco Design 作为一款专为 Vue3 打造的企业级 UI 组件库,以其丰富的特性和卓越的性能,成为现代 Web 应用开发者值得关注的选择,这篇文章主要介绍了Vue3 框架Arco Design详解,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解，本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-09-09
这篇文章主要为大家详细介绍了Vue实现验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了Vue-router路由该如何使用，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要给大家介绍了Vue3自定义指令的相关资料,自定义指令是一种在Vue应用程序中扩展HTML标签的能力,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-09-09
vue的axios请求改变content-type为form-data问题
这篇文章主要介绍了vue的axios请求改变content-type为form-data问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
下面小编就为大家分享一篇VUE2 前端实现 静态二级省市联动选择select的示例。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue3 中的 watchEffect 特性详解,watchEffect 是 Vue3 中非常有用的一个特性，它可以让我们轻松地监听响应式数据的变化，并在数据发生变化时执行指定的回调函数，从而简化代码并提高应用的性能，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue实现表格首列相同数据合并的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
最新评论