Avoid with v-model having child elements<strong></h3> </div> <div class="panel-body"> <div class="pull-right"> <span class='st_linkedin_large' displayText='LinkedIn'></span> <span class='st_twitter_large' displayText='Tweet'></span> <span class='st_dzone_large' displayText='DZone'></span> <span class='st_pinterest_large' displayText='Pinterest'></span> <span class='st_facebook_large' displayText='Facebook'></span> <span class='st_email_large' displayText='Email'></span> <span class='st_sharethis_large' displayText='ShareThis'></span> </div> <br> <div class="h4"><b>Rule Definition</b><br> If v-model is specified at <textarea>, the contents of <textarea> are completely determined by the value of v-model. If the textarea has children they will be ignored and may lead to unexpected behavior. </div> <br> <div class="h4"> <b>Remediation</b><br> Ensure you don't use <textarea> with child elements such as inner text </div> <hr> <div class="h4"><i class="fa fa-times-circle color-danger"></i> <b>Violation Code Sample</b></div> <div class="h6"> <pre><textarea v-model="text">Please enter a value</textarea> //VIOLATION</pre> </div> <div class="h4"><i class="fa fa-check-circle color-success"></i> <b>Fixed Code Sample</b></div> <div class="h6"> <pre><textarea v-model="text" placeholder="Please enter a value" /></pre> </div> <hr> <div class="h4"><b>Reference</b></div> <div class="h4">https://vuejs.org/v2/guide/forms.html#Multiline-text</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 class="panel-footer"><a href="explore.php" class="btn btn-block btn-primary"><i class="glyphicon glyphicon-stats"></i> Explore Appmarq's Data</a></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">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="77.78" aria-valuemin="0" aria-valuemax="100" style="width: 77.78%; padding:6px; font-size:18px; text-align:left; "> 77.78% </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">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="94.12" aria-valuemin="0" aria-valuemax="100" style="width: 94.12%; padding:6px; font-size:18px; text-align:left; "> 94.12% </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">Don't Know</h4></div> <div class="col-md-8 text-left"> <h4><div class="progress" style="height:30px"> <div class="progress-bar" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%; padding:6px; font-size:18px; text-align:left; "> 100.00% </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>