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 Array Flatten 与递归使用介绍
Oct 30 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
vue滚动插件better-scroll使用详解
Oct 18 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中上传大体积文件时需要的设置
2006/10/09 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
Python eval函数介绍及用法
2020/11/09 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
设计总监岗位职责
2013/12/07 职场文书
道路交通安全实施方案
2014/03/12 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
《悯农》教学反思
2014/04/28 职场文书
六一儿童节活动总结
2014/08/27 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2015年教学工作总结
2015/04/02 职场文书
南京大屠杀观后感
2015/06/02 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
怎样写好工作计划
2019/04/10 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS