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_ibm
May 16 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
关于js遍历表格的实例
Jul 10 Javascript
javascript 回调函数详解
Nov 11 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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
php的控制语句
2006/10/09 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
教育英语专业毕业生的求职信
2014/03/13 职场文书
党员活动日总结
2014/05/05 职场文书
反对邪教标语
2014/06/30 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
红楼梦读书笔记
2015/06/25 职场文书
2015双创工作总结
2015/07/24 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书