让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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
jquery 表单下所有元素的隐藏
Jul 25 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
原生js实现选项卡功能
Mar 08 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
layui使用label标签的方法
Sep 14 Javascript
利用js实现简单开关灯代码
Nov 23 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生成静态页
2006/11/25 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python正则表达式之对号入座篇
2018/07/24 Python
对python多线程与global变量详解
2018/11/09 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python模块导入的方法
2019/10/24 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
硕士研究生求职自荐信范文
2014/03/11 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS