vue 解决computed修改data数据的问题


Posted in Javascript onNovember 06, 2019

最近在做项目的时候遇见一个问题,computed修改data数据的时候会报错。报错的大概意思是,不可以修改data数据的属性值。查了一些答案,最终解决办法是需要用到set和get。看代码:

data () {
  return {
   fold: false
 }
}

我想修改fold的值,如果不用get和set就会报错!!!

computed:{
  listShow: {
    get: function () {
      if (!this.totalCount) {
       return false
      }
      return this.fold
     },
    set: function () {
      if (!this.totalCount) {
      this.fold = false
      return false
    }
  }
}

get里面的值可以在页面加载或者数据改变的时候实时更新,但是set方法里面的如果想起作用,你需要调用listShow才会起作用。

看代码:

methods: {
  toggleList () {
   if (!this.totalCount) {
    return
   }
   this.listShow = false//这里需要调用一下
   this.fold = !this.fold
  },
}

如果不调用的情况下,逻辑都写到get里面,就可以实时更新了。

以上这篇vue 解决computed修改data数据的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript取消文本选定的实现代码
Nov 14 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
微信小程序页面渲染实现方法
Nov 06 #Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 #Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 #Javascript
对vuex中getters计算过滤操作详解
Nov 06 #Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 #Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 #Javascript
vuex actions异步修改状态的实例详解
Nov 06 #Javascript
You might like
MySQL相关说明
2007/01/15 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
php 错误处理经验分享
2011/10/11 PHP
Yii配置文件用法详解
2014/12/04 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
javascript 数组排序函数
2009/08/20 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
浅谈javascript的调试
2015/01/28 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python程序员面试题 你必须提前准备!
2018/01/16 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python实现共轭梯度法
2019/07/03 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
python GUI模拟实现计算器
2020/06/22 Python
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
社会实践自我鉴定
2013/11/07 职场文书
教育专业自荐书范文
2013/12/17 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
教师远程培训感言
2014/03/06 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
企业贷款委托书格式
2014/09/12 职场文书
大学生实习证明
2015/06/16 职场文书
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
Java使用HttpClient实现文件下载
2022/08/14 Java/Android