让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打造PHP的AJAX表单提交实例
Nov 03 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
layui表格数据重载
Jul 27 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
vue首次渲染全过程
Apr 21 Vue.js
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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
PHP数组操作简单案例分析
2016/10/15 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python_LDA实现方法详解
2017/10/25 Python
快速入门python学习笔记
2017/12/06 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
Linux的主要特性
2016/09/03 面试题
社团招新策划书
2014/02/04 职场文书
学员自我鉴定
2014/03/19 职场文书
产品发布会策划方案
2014/05/12 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
小学体育组工作总结
2015/08/13 职场文书
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python