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>. When v-show is used with <template>, it will be ignored and the contents of <template> will be displayed regardless of the v-show condition.
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>
  <div class="my-component">
    <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false
    }
  }
}
</script>

Compliant Code Example

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

<script>
export default {
  data() {
    return {
      flag: false
    }
  }
}
</script>

Version

This rule was introduced in DeepScan 1.17.0-beta.

See

• v-show