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中的replace方法使用介绍
Oct 28 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
原生js实现放大镜特效
Mar 08 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Python Requests库基本用法示例
2018/08/20 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
python编写简单端口扫描器
2019/09/04 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
手术室护士自我鉴定
2013/10/14 职场文书
物理教师自荐信范文
2013/12/28 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
疾病捐款倡议书
2014/05/13 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
领导干部作风建设总结
2014/10/23 职场文书
沈阳故宫导游词
2015/01/31 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python