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实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
node.js中的console用法总结
2014/12/15 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
win7安装python生成随机数代码分享
2013/12/27 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Django多数据库的实现过程详解
2019/08/01 Python
pandas的相关系数与协方差实例
2019/12/27 Python
Python argparse模块使用方法解析
2020/02/20 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
尊师重教演讲稿
2014/09/04 职场文书
党性分析自查总结
2014/10/14 职场文书
2014年实习生工作总结
2014/11/27 职场文书
2015年小学生暑假总结
2015/07/13 职场文书