<p dir="auto">At some situations, plain object isn't the best choise. I tried to render a <code class="notranslate">Map</code> object by <code class="notranslate">v-for</code>, but seems <code class="notranslate">Vue</code> does not support it currently. (Here's a <a href="http://forum.vuejs.org/topic/2638/how-to-use-v-for-to-iterate-over-a-map-object/5" rel="nofollow">post</a> I created in the Help thread on the forum.)</p>
<p dir="auto">Hope <code class="notranslate">Vue</code> can provide the <code class="notranslate">for ... of</code> syntax in <code class="notranslate">v-for</code> to iterate over data types like <code class="notranslate">Map</code> and <code class="notranslate">Set</code>.</p>
<p dir="auto">For example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const map = new Map();
map.set('key1', 'val1');
map.set('key2', 'val2');"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">map</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Map</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">map</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s">'key1'</span><span class="pl-kos">,</span> <span class="pl-s">'val1'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">map</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s">'key2'</span><span class="pl-kos">,</span> <span class="pl-s">'val2'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">and we can render <code class="notranslate">map</code> in this way:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;ul&gt;
    &lt;li v-for=&quot;[key, val] of map&quot;&gt;{{key}} - {{val}}&lt;/li&gt;
&lt;/ul&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">li</span> <span class="pl-c1">v-for</span>="<span class="pl-s">[key, val] of map</span>"<span class="pl-kos">&gt;</span>{{key}} - {{val}}<span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Hi</p>
<p dir="auto">I has modified <a href="http://jsfiddle.net/yMv7y/943/" rel="nofollow">"Quick example"</a> with using the Iterator protocol.<br>
Will be great if it will work in <code class="notranslate">1.0</code> version for es6 environments.</p>
<p dir="auto">Useful links:<br>
<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Iteration_protocols" rel="nofollow">https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Iteration_protocols</a><br>
<a href="http://www.2ality.com/2015/02/es6-iteration.html" rel="nofollow">http://www.2ality.com/2015/02/es6-iteration.html</a></p>