让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 相关文章推荐
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
js arguments对象应用介绍
Nov 28 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
js实现图片上传并预览功能
Aug 06 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
javascript知识点收藏
2007/02/22 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
python简单的函数定义和用法实例
2015/05/07 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
Python龙贝格法求积分实例
2020/02/29 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
校园奶茶店创业计划书
2014/01/23 职场文书
中文师范生自荐信
2014/01/30 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
运动会稿件100字
2014/02/21 职场文书
搞笑征婚广告词
2014/03/17 职场文书
银行奉献演讲稿
2014/09/16 职场文书
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python