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 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
基于jquery编写分页插件
Mar 07 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
vue在图片上传的时候压缩图片
Nov 18 Vue.js
微信小程序页面渲染实现方法
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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
vue2项目使用sass的示例代码
2017/06/28 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
JavaScript实现多个物体同时运动
2020/03/12 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python线程的几种创建方式详解
2019/08/29 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
荟萃全球保健品:维他购
2018/05/09 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
结婚喜宴家长答谢词
2014/01/15 职场文书
学期评语大全
2014/04/30 职场文书
工作会议方案
2014/05/21 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
返乡农民工证明
2015/06/24 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python