<p dir="auto">I've been using <a href="https://github.com/jasonmayes/Twitter-Post-Fetcher">twitter-fetcher</a> to circumvent Twitter's latest API without much issues until recently when I started getting the following errors, after posting a duplicate tweet:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[Vue warn]: Duplicate value found in v-for=&quot;tweet in tweets&quot;: &quot;&lt;p class=\&quot;tweet\&quot;&gt;tweet parsed from json file!&lt;/p&gt;&quot;. Use track-by=&quot;$index&quot; if you are expecting duplicate values.

vue.js:1174 Uncaught TypeError: Cannot read property 'parentNode' of null. "><pre class="notranslate"><code class="notranslate">[Vue warn]: Duplicate value found in v-for="tweet in tweets": "&lt;p class=\"tweet\"&gt;tweet parsed from json file!&lt;/p&gt;". Use track-by="$index" if you are expecting duplicate values.

vue.js:1174 Uncaught TypeError: Cannot read property 'parentNode' of null. 
</code></pre></div>
<p dir="auto">Why would <code class="notranslate">v-for</code> throw an error when there's a duplicate value? I've reproduced the warning <a href="https://ide.c9.io/pierrebonbon/twitter-fetcher" rel="nofollow">here</a></p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">make template html more <strong>DRY</strong> by reducing simple component (self-evident?) definitions.</p>
<p dir="auto">Many times I find that I declare event methods using the same name as the underlying event, such as</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;a @click=click @mouseover=mouseover :title=title&gt;hello&lt;/a&gt;"><pre class="notranslate"><code class="notranslate">&lt;a @click=click @mouseover=mouseover :title=title&gt;hello&lt;/a&gt;
</code></pre></div>
<p dir="auto">(where <code class="notranslate">click</code> and <code class="notranslate">mouseover</code> are of course defined as methods for the component, and <code class="notranslate">title</code> is declared within the data() object).</p>
<p dir="auto">A cleaner way to do this (imho, and in keeping with javascript's shorthand object notation: e.g. const x = { a, b, c }), a cleaner way may look like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;a @click @mouseover :title&gt;hello&lt;/a&gt;"><pre class="notranslate"><code class="notranslate">&lt;a @click @mouseover :title&gt;hello&lt;/a&gt;
</code></pre></div>
<p dir="auto">This concept could also be extended to binding of variables &amp; props (e.g. :title=title becomes :title).</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">the API would not (should not need to) be changed as this would affect only the initial parsing of a template's html.</p>
<p dir="auto">I suspect the parts of the code to be modified would be <a href="https://github.com/vuejs/vue/blob/dev/src/compiler/parser/html-parser.js">here</a> and <a href="https://github.com/vuejs/vue/blob/dev/src/compiler/directives/model.js">here</a> but those were too involved for me to attempt.</p>