Vue3 怎么 v-for 一个 Map 类型的数据呢？

作者站长头像
站长
· 阅读数 8

Vue3 怎么 v-for 一个 Map 类型的数据呢？

vue3 v-for 官方教程

如上图，今天在项目中遇到一个场景需要遍历渲染一个 Map 类型的数据，但是在我 v-for 的时候，发现了结果不是我预期的那种，但是官网也没有明确举例子。

如下图，我期望它能像数组一样，v-for 的时候就呈现出每一项的对应的 key -valueVue3 怎么 v-for 一个 Map 类型的数据呢？

但是页面上却是这样的效果，只有一项，并且这一项竟然还是一个数组的样子(带方括号)Vue3 怎么 v-for 一个 Map 类型的数据呢？

问题1：vue3 的 Map 该如何用 v-for 遍历呢？问题2：或者有没有别的方法呢？

回复
1个回答
avatar
test
2024-07-01
<template>
 <div v-for="(v, k) of iterator">
    {{ v }}
    {{ k }}
  </div>
</template>

<script setup>
const map = new Map()

map.set('0', 'foo')
map.set(1, 'bar')

const iterator = map.values()
</script>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容