让Vue响应Map或Set的变化操作
问题背景
我想在vuex的state中使用map，这样可以使很多操作变得方便
const state = {
all: new Map()
}
这样的写法是没有问题的，不会报错，state.all可以像正常的Map一样使用。
但是这里有一个问题，vue的响应式系统不支持Map和Set，也就是说，当Map与Set里面的元素变化时Vue追踪不到这些变化，因此无法做出响应。这样一来，页面上依赖all的元素也不会随all的变化而变化
解决方法
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，但渲染成功
场景：
从后台请求的数据结构如下：
我的list是对象，而comment又是list里的对象，渲染成功了，却报如下错：
解决办法：
添加一个：v-if
以上这篇让Vue响应Map或Set的变化操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了玩转vue的slot内容分发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在vue2中v-model使用的还是挺多的,不过这个指令一般是用在了输入框中,并且这个指令其实就是个语法糖,下面这篇文章主要给大家介绍了关于vue3组件中v-model的使用以及深入讲解的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了Vue路由守卫及页面登录权限控制的设置方法,本文通过实例代码通过两种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
本篇文章主要介绍了vue 里面使用axios 和封装的示例代码，非常具有实用价值，需要的朋友可以参考下2017-09-09
这篇文章主要为大家详细介绍了Vue.js实现九宫格图片展示模块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
详解使用element-ui table组件的筛选功能的一个小坑
在element ui 框架中，对于table框架，有一个筛选功能，这篇文章主要介绍了详解使用element-ui table组件的筛选功能的一个小坑，非常具有实用价值，需要的朋友可以参考下2018-11-11
vue跳转时根据url锚点(#xxx)实现页面内容定位的方法
本前端仔在做页面跳转的时候,被要求跳转到页面时候,把对应部分的内容自动滚动到顶部,我一开始想到的就是根据锚点<a href="#xxid">进行处理,但是发现不太好实现,于是便自己研究了一个比较取巧的方法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue双向数据绑定的原理以及知识点总结，并做了代码实例分析，有需要的朋友参考下。2018-04-04
最近工作中遇到个需求,需要实现个可视化图表页的PDF文件导出,所以下面这篇文章主要给大家介绍了关于利用vue如何将html页面生成高清晰pdf文件的相关资料,需要的朋友可以参考下2022-03-03
keep-Alive搭配vue-router实现缓存页面效果的示例代码
这篇文章主要介绍了keep-Alive搭配vue-router实现缓存页面效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
最新评论