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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
Javascript 篱式条件判断
Aug 22 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
vue-iview动态新增和删除的方法
Jun 17 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获取目标函数执行时间示例
2014/03/04 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
webpack打包js的方法
2018/03/12 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
python如何设置静态变量
2020/09/07 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
大学生年度自我鉴定
2013/10/31 职场文书
学生个人的自我评价分享
2013/11/05 职场文书
兼职学生的自我评价
2013/11/24 职场文书
家具商场的活动方案
2014/08/16 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
PHP策略模式写法
2021/04/01 PHP
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
Oracle中DBLink的详细介绍
2022/04/29 Oracle
python中使用redis用法详解
2022/12/24 Redis