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 }};
  </div>
</div>

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');
    // ...
  },
});

<!--
  output:
  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.