Vue <template> element should not have v-show directive

• VUE_TEMPLATE_WITH_V_SHOW
• Error
• Medium
• vue

This rule applies when a Vue <template> element has a v-show directive.

v-show is a directive for conditionally displaying an element but it does not support <template>. If v-show is used with <template>, it will be ignored and the <template> will be rendered as a native HTML element instead of a Vue built-in.

If you intended not to show the contents of <template> according to a specific value, you should specify the value as v-if instead of v-show.

Noncompliant Code Example

<template>
  <button v-on:click="flag = !flag">Show or hide (flag: {{ flag }})</button>
  <template v-show="flag"> <!-- VUE_TEMPLATE_WITH_V_SHOW alarm -->
    Only show me if flag is true!
  </template>
</template>

Compliant Code Example

<template>
  <button v-on:click="flag = !flag">Show or hide (flag: {{ flag }})</button>
  <template v-if="flag">
    Only show me if flag is true!
  </template>
</template>

Version

This rule was introduced in DeepScan 1.17.0-beta.

See

• Built-in Special Elements: <template>

• Conditional Rendering - v-show