How to Iterate Over a Map in Vue.js?

Starting with Vue.js v3, you can iterate over a Map object using the v-for directive in the following way:

<div id="app">
  <div v-for="[key, value] in abbreviations">
    {{ key }} => {{ value }};
new Vue({
  el: '#app',
  data: {
    abbreviations: new Map(),
  created: function() {
    this.abbreviations.set('e.g.', 'example');
    this.abbreviations.set('i.e.', 'that is');
    this.abbreviations.set('no.', 'number');
    // ...
  e.g. => example;
  i.e. => that is;
  no. => number;

Please note that in versions prior to Vue.js v3, iterating over Map is not supported.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.