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 事件系统
Jul 22 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
vue实现带复选框的树形菜单
May 27 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框架的性能
2008/01/10 PHP
php 文章采集正则代码
2009/12/28 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Python中__name__的使用实例
2015/04/14 Python
numpy中索引和切片详解
2017/12/15 Python
python os模块简单应用示例
2019/05/23 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python常用运维脚本实例小结
2020/02/14 Python
新年晚会主持词
2014/03/24 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
班主任2015新年寄语
2014/12/08 职场文书
先进个人事迹材料
2014/12/29 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
《包身工》教学反思
2016/02/23 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python