Avoid using v-for without key

Rule Definition
When working with HTML elements that have a state in v-for loops we have to be careful that that state does not get destroyed when the DOM is re-rendered. Elements like , all hold an internal state that captures the value of that element. When Vue’s virtual DOM is modified because reactive data changed, there can be cases where the DOM that holds the looped elements can be completely or partially destroyed if the key is not properly set. This of course also applies to looping custom-made components that hold state - the same rule of thumb applies. If the key is not defined, there is a risk of data and state being destroyed due to a re-render of the DOM. </div> <br> <div class="h4"> <b>Remediation</b><br> Define key for v-for </div> <hr> <div class="h4"><i class="fa fa-times-circle color-danger"></i> <b>Violation Code Sample</b></div> <div class="h6"> <pre><div v-for="item in items"> <input> </div> <span v-html="<input />" v-for="item in items" /> <input v-for="input in myForm" /></pre> </div> <div class="h4"><i class="fa fa-check-circle color-success"></i> <b>Fixed Code Sample</b></div> <div class="h6"> <pre> <div v-for="item in items" :key="unique-condition"> <input> </div> <span v-html="<input />" v-for="item in items" :key="unique-condition" /> <input v-for="input in myForm" :key="unique-condition" /></pre> </div> <hr> <div class="h4"><b>Reference</b></div> <div class="h4">https://www.telerik.com/blogs/in-vue-when-do-i-actually-need-the-key-attribute-and-why https://fr.vuejs.org/v2/guide/list.html#Maintaining-State</div> <hr> <h5><strong><i class="fa fa-code"></i> Related Technologies</strong></h5> <hr> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <h4>Health Factor</h4> <h3><a href="index.php?healthfactor=robustness"><span class="label label-primary" style="border-radius:3px; "><i class="icon-raw-robustness" style="padding-left:4px"></i> Robustness</span></a></h3> <h4 style="margin-top:20px"> </h4> </div> </div> <hr> <h5><strong>Technical Criterion</strong></h5> <span class="label label-default" style="border-radius:3px; font-size:18px; background:#444">Programming Practices - Unexpected Behavior</span> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div style="background:#FAFAFA; border-radius:3px; padding:16px; margin-top:40px"> <div class="col-md-2 col-sm-2 col-xs-2" align="center"> <i class="icon-appmarq-raw" style="font-size:120px; padding:40px; padding-left:10px"></i> </div> <div class="col-md-10 col-sm-10 col-xs-10"> <h4 style="font-weight:400">About CAST Appmarq</h4> <h5> CAST Appmarq is by far the biggest repository of data about real IT systems. It's built on thousands of analyzed applications, made of 35 different technologies, by over 300 business organizations across major verticals. It provides IT Leaders with factual key analytics to let them know if their applications are on track. </h5> </div> <div style="clear:both"></div> </div> </div> </div> </div>  </div> </div> <div class="col-md-5"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><strong><i class="glyphicon glyphicon-stats"></i> Benchmark Statistics<strong></h3> </div> <div class="panel-body"> <div class="col-md-8"><h4 style="font-weight:800"><i class="icon-health-factor" style="font-weight:600"></i> Global Compliance</h4></div> <div class="col-md-4 text-right"><h4><strong>nan%</strong></h4></div> <div class="col-md-12" style="border-bottom:1px solid #f0f0f0"></div> <div class="col-md-8"><h5 style="font-weight:400">Total Violations</h5></div> <div class="col-md-4 text-right"><h5>0</h5></div> <div class="col-md-12" style="border-bottom:1px solid #f0f0f0"></div> <div class="col-md-8"><h5 style="font-weight:400">Total Opportunities</h5></div> <div class="col-md-4 text-right"><h5>0</h5></div> <div class="col-md-12" style="border-bottom:1px solid #f0f0f0"></div> <div class="col-md-8"><h5 style="font-weight:400">Average Violations / App.</h5></div> <div class="col-md-4 text-right"><h5>nan</h5></div> </div> <div class="col-md-12"> <div class="well" style="font-weight:100"><i class="glyphicon glyphicon-question-sign"></i> The compliance score represents 1 minus the ratio between the number of times a rule has been violated compared to the number of opportunities in a set of applications that the rule could have been violated.</div> </div> <div class="panel-body"> <div class="col-md-8"><h4 style="font-weight:800"><i class="fa fa-building-o"></i> Industry Insights</h4></div> <div class="col-md-4 text-right"></div> <div class="col-md-12" style="border-bottom:1px solid #f0f0f0"></div> <div class="col-md-4"><h4 style="font-weight:400">Select from drop-down</h4></div> <div class="col-md-8 text-left"> <h4><div class="progress" style="height:30px"> <div class="progress-bar" role="progressbar" aria-valuenow="79.73" aria-valuemin="0" aria-valuemax="100" style="width: 79.73%; padding:6px; font-size:18px; text-align:left; "> 79.73% </div> </div> </h4> </div> <div class="col-md-12" style="border-bottom:1px solid #f0f0f0"></div> <div class="col-md-4"><h4 style="font-weight:400">IT & Business Consulting</h4></div> <div class="col-md-8 text-left"> <h4><div class="progress" style="height:30px"> <div class="progress-bar" role="progressbar" aria-valuenow="38.83" aria-valuemin="0" aria-valuemax="100" style="width: 38.83%; padding:6px; font-size:18px; text-align:left; "> 38.83% </div> </div> </h4> </div> <div class="col-md-12" style="border-bottom:1px solid #f0f0f0"></div> <div class="col-md-4"><h4 style="font-weight:400">Software ISV</h4></div> <div class="col-md-8 text-left"> <h4><div class="progress" style="height:30px"> <div class="progress-bar" role="progressbar" aria-valuenow="66.80" aria-valuemin="0" aria-valuemax="100" style="width: 66.80%; padding:6px; font-size:18px; text-align:left; "> 66.80% </div> </div> </h4> </div> </div> <div class="panel-footer"><a href="../index.php" class="btn btn-rad btn-block btn-primary" style="font-size:18px"><i class="glyphicon glyphicon-stats" style="font-size:18px"></i> <strong>Want more stats?</strong> Register now!</a></div> </div> </div> </body> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2127556-16', 'auto'); ga('send', 'pageview'); </script> </html>