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 面向对象的5钟写法
Jul 31 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
对vue中methods互相调用的方法详解
Aug 30 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 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版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
django 使用全局搜索功能的实例详解
2019/07/18 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python实现从wind导入数据
2019/12/03 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
怎样填写就业意向
2014/04/02 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
文艺晚会开场白
2015/05/29 职场文书
联谊会开场白
2015/06/01 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis