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 相关文章推荐
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
Vue实现选择城市功能
May 27 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
微信小程序页面渲染实现方法
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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
javascript实现信息增删改查的方法
2015/07/25 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
浅谈Python NLP入门教程
2017/12/25 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
python科学计算之narray对象用法
2019/11/25 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
python基于win32api实现键盘输入
2020/12/09 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
小学门卫岗位职责
2013/12/17 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
学期自我评价
2014/01/27 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
建议书怎么写
2014/03/12 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
答辩状格式范本
2015/05/22 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android