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倒计时功能实现代码
Jun 07 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
Nov 17 Javascript
原生js的数组除重复简单实例
May 24 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 Javascript
js实现验证码干扰(动态)
Feb 23 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文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
妙用Jquery的val()方法
2012/06/27 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
JQuery球队选择实例
2015/05/18 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
js实现返回顶部效果
2017/03/10 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
详解python3百度指数抓取实例
2016/12/12 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python实现抖音点赞功能
2019/04/07 Python
python多线程使用方法实例详解
2019/12/30 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
建材业务员岗位职责
2013/12/08 职场文书
出纳员岗位责任制
2014/02/11 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
施工工地安全标语
2014/06/07 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
MySQL分区以及建索引的方法总结
2022/04/13 MySQL