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 相关文章推荐
基于jquery的tab切换 js原理
Apr 01 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 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
Phpbean路由转发的php代码
2008/01/10 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
原生js实现日历效果
2020/03/02 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
python抓取网页中的图片示例
2014/02/28 Python
一份python入门应该看的学习资料
2018/04/11 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
职业生涯规划书范文
2014/03/10 职场文书
学校消防安全责任书
2014/07/23 职场文书
安全保证书
2015/01/16 职场文书
党员转正党支部意见
2015/06/02 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
Python+DeOldify实现老照片上色功能
2022/06/21 Python