useVueValidVShow (HTML)

Language HTML

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/useVueValidVShow
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/valid-v-show

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueValidVShow": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce valid v-show directives.

The v-show directive shows or hides an element depending on whether its value is true or false. It takes only a value, and it must be placed on an element that appears on the page.

This rule reports v-show directives in the following cases:

The directive has an argument. E.g. <div v-show:aaa="foo"></div>
The directive has a modifier. E.g. <div v-show.bbb="foo"></div>
The directive does not have a value. E.g. <div v-show></div>
The directive is on a <template> element. E.g. <template v-show="foo"></template>

Examples

Invalid

1
<div v-show:aaa="foo"></div>

code-block.vue:1:12 lint/nursery/useVueValidVShow ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-show directive doesn't accept an argument.
  
  > 1 │ <div v-show:aaa="foo"></div>
      │            ^^^^
    2 │ 
  
  ℹ v-show only uses its value to decide whether to show the element, so the argument does nothing.
  
  ℹ Remove the argument, like v-show="isVisible".
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<div v-show.bbb="foo"></div>

code-block.vue:1:12 lint/nursery/useVueValidVShow ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-show directive doesn't accept modifiers.
  
  > 1 │ <div v-show.bbb="foo"></div>
      │            ^^^^
    2 │ 
  
  ℹ v-show has no modifiers, so this modifier does nothing.
  
  ℹ Remove the modifier, like v-show="isVisible".
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<div v-show></div>

code-block.vue:1:6 lint/nursery/useVueValidVShow ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-show directive is missing a value.
  
  > 1 │ <div v-show></div>
      │      ^^^^^^
    2 │ 
  
  ℹ v-show needs a value to decide whether to show or hide the element.
  
  ℹ Add a condition, like v-show="isVisible".
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<template v-show="foo"><div></div></template>

code-block.vue:1:11 lint/nursery/useVueValidVShow ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-show directive can't be used on a <template> element.
  
  > 1 │ <template v-show="foo"><div></div></template>
      │           ^^^^^^^^^^^^
    2 │ 
  
  ℹ v-show hides an element by changing its CSS display style. A <template> element doesn't appear on the page, so there is nothing for v-show to hide.
  
  ℹ Use v-if on the <template> instead, or move v-show to an element inside it.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<div v-show="isVisible"></div>
2
<template v-if="isVisible"><div></div></template>