Rule Definition
v-show does not support the element and hence the directive will not be considered while render.
When v-show is used with , it will be ignored and the contents of will be displayed regardless of the v-show condition.
Remediation
use v-if instead of v-show
Violation Code Sample
<template>
<div class="my-component">
<button v-on:click="flag = !flag">Show or hide (flag: {{ flag }})</button>
<template v-show="flag"> <!-- VIOLATION -->
Only show me if flag is true!
</template>
</div>
</template>
Fixed Code Sample
<template>
<div class="my-component">
<button v-on:click="flag = !flag">Show or hide (flag: {{ flag }})</button>
<template v-if="flag"> <!-- fixed with v-if-->
Only show me if flag is true!
</template>
</div>
</template>
Reference
https://vuejs.org/v2/guide/conditional.html#v-show
Related Technologies
Technical Criterion
Programming Practices - Unexpected Behavior
About CAST Appmarq
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.