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

Question

vue3 v-for 官方教程

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

如下图，我期望它能像数组一样，v-for 的时候就呈现出每一项的对应的 key -value

但是页面上却是这样的效果，只有一项，并且这一项竟然还是一个数组的样子(带方括号)

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

Answer 1

<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>

Answer 2

把map当数组用了

看代码 第一次map.set('key', 'value')此时map中 key为key的value被设置为value。

当第二次map.set('key', 'valeu2') 此时，key会覆盖原有的key，并且值设置为value2。

也就是说，相同key只能出现一次，否则后边覆盖前边。

然后根据你的设想，代码应该这样

<script setup lang="ts">
const m = new Map<string, any>();
m.set('user1', {name:123});
m.set('user2', {name:456});
</script>

<template>
<!-- 注意 是[]不是{} -->
<p v-for="[idx, item] of m">
    {{item.name}} <!-- 这里才是map中的每一个item -->
</p>
</template>

非专业前端，个人理解，Map在功能上等同于一个普通对象，即{key:value}, 相同key有且只能有一个。

Answer 3

map本身就是键值对集合 你直接v-for遍历 相当于遍历map.entries()，它返回的结果就是[key,value]类型，如果你想要拿到键或值，需要先map.keys(),或者map.values()