让Vue响应Map或Set的变化操作


Posted in Javascript onNovember 11, 2020

问题背景

我想在vuex的state中使用map,这样可以使很多操作变得方便

const state = {
 all: new Map()
}

这样的写法是没有问题的,不会报错,state.all可以像正常的Map一样使用。

但是这里有一个问题,vue的响应式系统不支持Map和Set,也就是说,当Map与Set里面的元素变化时Vue追踪不到这些变化,因此无法做出响应。这样一来,页面上依赖all的元素也不会随all的变化而变化

解决方法

用户”inca”的回答

you need to create a serializable replica of this structure and expose it to Vue

data() {
 mySetChangeTracker: 1,
 mySet: new Set(),
},

computed: {
 mySetAsList() {
 var x = this.mySetChangeTracker;
 // By using `mySetChangeTracker` we tell Vue that this property depends on it,
 // so it gets re-evaluated whenever `mySetChangeTracker` changes
 return Array.from(this.mySet);
 },
},

methods: {
 add(item) {
 this.mySet.add(item);
 // Trigger Vue updates
 this.mySetChangeTracker += 1;
 }
}

解决方法是用一个可序列化的mySetChangeTracker来手动追踪变化

Vue追踪不到Set的变化,但是可以追踪到mySetChangeTracker的变化,所以当Set发生改变后,手动改变mySetChangeTracker的值就能让Vue知道我的数据发生了变化。

在mySetAsList里面写入var x = this.mySetChangeTracker,这样一来当mySetChangeTracker更新后,mySetAsList就会做出响应

补充知识:vue渲染时对象里面的对象的属性提示undefined,但渲染成功

场景:

从后台请求的数据结构如下:

让Vue响应Map或Set的变化操作

让Vue响应Map或Set的变化操作

我的list是对象,而comment又是list里的对象,渲染成功了,却报如下错:

让Vue响应Map或Set的变化操作

解决办法:

添加一个:v-if

让Vue响应Map或Set的变化操作

以上这篇让Vue响应Map或Set的变化操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的商品展示放大镜
Aug 07 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 #Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 #Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 #Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 #Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 #Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 #Javascript
vue.js+element 默认提示中英文操作
Nov 11 #Javascript
You might like
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP chop()函数讲解
2019/02/11 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
Mac中安装nvm的教程分享
2017/12/11 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python线程池threadpool实现篇
2018/04/27 Python
python爬虫实例详解
2018/06/19 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
2014年人事科工作总结
2014/11/19 职场文书
会议邀请函
2015/01/30 职场文书
小学见习报告
2015/06/23 职场文书
php 原生分页
2021/04/01 PHP