Question: How to iterate over maps and sets with v-for

[yoyo837]

What problem does this feature solve?

How to iterate over Map and Set with v-for ? I want to use the key/index field or both.(ES6 Map/Set)

<mt-index-list>
  <mt-index-section v-for="(list, key) in serverData.indexMap" :index="key" :key="key">
	<mt-cell title="Aaron"></mt-cell>
  </mt-index-section>
</mt-index-list>

What does the proposed API look like?

N/A

[sqal]

Maps and sets are not currently supported in v-for, heard it will be possible in Vue 3.0

[yyx990803]

It's currently not supported in core (there's no reactivity detection for these data structures). But you can use (list, key) in Array.from(map) + $forceUpdate() to simulate it.

[yoyo837]

@yyx990803 @sqal
OK, I got it. Thanks for your reply.

[CreatorMr]

Thanks

[Dwood15]

For those coming from google, this is not supported, nor is it planned to be.

Please see this issue: #2410

[Vineet-Sharma29]

if not v-for then is there any other way to iterate over map in vuejs?

[ambyjkl]

Sometimes you don't want reactivity, you just want to iterate over static data keyed by types other than string. It would be nice if v-for or a similar feature supported anything that implements Symbol.iterator

[ddosanjh]

This is still a top-ranked result for google searches on iterating a Map with v-for, so for those landing here as I did, in Vue 3 (vue-next as of this writing), reactivity on Map (and Set) is supported. And you can conveniently write a v-for loop using array destructuring syntax:

<div v-for="[fooKey, barValue] in fooBarMap" >
  {{fooKey}} is {{barValue}}
...

[Archieeeeee]

This is still a top-ranked result for google searches on iterating a Map with v-for, so for those landing here as I did, in Vue 3 (vue-next as of this writing), reactivity on Map (and Set) is supported. And you can conveniently write a v-for loop using array destructuring syntax:

<div v-for="[fooKey, barValue] in fooBarMap" >
  {{fooKey}} is {{barValue}}
...

Thank you, you saved my day.

[RobertoMaurizzi]

Using a Map should solve the ugly problem of not having a standard-defined enumeration order for the keys of an Object

[suterma]

I needed to also have a key, like (in Vue3)

    <div v-for="[fooKey, barValue] in fooBarMap" :key="fooKey">
        {{ fooKey }} is {{ barValue }}
    </div>

[matthew-dean]

Apparently you can also use of, like:

<div v-for="[fooKey, barValue] of fooBarMap" >