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


Posted in Javascript onNovember 06, 2019

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计算属性无法监听到数组内部变化的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
jquery tools系列 expose 学习
Sep 06 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
原生JS实现天气预报
Jun 16 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 #Javascript
vuex state中的数组变化监听实例
Nov 06 #Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 #Javascript
webpack是如何实现模块化加载的方法
Nov 06 #Javascript
node读写Excel操作实例分析
Nov 06 #Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 #Javascript
electron 安装,调试,打包的具体使用
Nov 06 #Javascript
You might like
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Django内容增加富文本功能的实例
2017/10/17 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
单方离婚协议书范本2014
2014/10/28 职场文书
春节慰问信范文
2015/02/15 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
Golang实现可重入锁的示例代码
2022/05/25 Golang