useVueVOnExact (HTML)

Language HTML

Summary

Rule available since: v2.6.3
Diagnostic Category: lint/nursery/useVueVOnExact
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/use-v-on-exact

How to configure

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

Description

Enforce the .exact modifier on v-on directives when another listener for the same event needs more modifier keys.

In Vue, a listener with modifier keys such as .ctrl or .shift runs when those keys are held down, even if other keys are held down too. A listener without modifier keys runs no matter which keys are held down. So when an element has both @click="select" and @click.ctrl="open", a Ctrl+click runs both select and open.

The .exact modifier makes a listener run only when exactly its modifier keys are held down. This rule reports v-on directives that also run for the modifier keys of another listener for the same event on the same element.

The modifier keys are .ctrl, .shift, .alt and .meta.

Components, such as <MyComponent>, <component> and <tr is="vue:my-row">, are ignored, because their listeners usually handle events emitted by the component.

Examples

Invalid

1
<template>
2
  <button @click="select" @click.ctrl="open"></button>
3
</template>

code-block.vue:2:11 lint/nursery/useVueVOnExact ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This event listener also runs when the modifier keys of another listener are held down.
  
    1 │ <template>
  > 2 │   <button @click="select" @click.ctrl="open"></button>
      │           ^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ When these modifier keys are held down, both listeners run.
  
    1 │ <template>
  > 2 │   <button @click="select" @click.ctrl="open"></button>
      │                           ^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Add the .exact modifier so this listener only runs when no other modifier keys are held down.
  
  ℹ 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>
2
  <input @keydown.enter="submit" @keydown.enter.shift="addLine" />
3
</template>

code-block.vue:2:10 lint/nursery/useVueVOnExact ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This event listener also runs when the modifier keys of another listener are held down.
  
    1 │ <template>
  > 2 │   <input @keydown.enter="submit" @keydown.enter.shift="addLine" />
      │          ^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ When these modifier keys are held down, both listeners run.
  
    1 │ <template>
  > 2 │   <input @keydown.enter="submit" @keydown.enter.shift="addLine" />
      │                                  ^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Add the .exact modifier so this listener only runs when no other modifier keys are held down.
  
  ℹ 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
<template>
2
  <button @click.exact="select" @click.ctrl="open"></button>
3
  <input @keydown.enter.exact="submit" @keydown.enter.shift="addLine" />
4
  <button @click="select" @click.stop="track"></button>
5
  <button @click="select"></button>
6
  <button @click.ctrl="open"></button>
7
</template>