useVueValidVMemo (HTML)

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/useVueValidVMemo
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-memo

How to configure

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

Description

Enforce valid v-memo Vue directives.

v-memo takes an array of values. Vue skips updating the element and its children until one of those values changes.

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

The directive has an argument. E.g. <div v-memo:aaa="[x]"></div>
The directive has a modifier. E.g. <div v-memo.bbb="[x]"></div>
The directive has no value, or an empty value. E.g. <div v-memo></div>
The directive is on an element inside another element that has v-for. v-memo doesn’t work there. To use v-memo with v-for, put both on the same element.

Examples

Invalid

1
<div v-memo:aaa="[x]"></div>

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

  ✖ The v-memo directive doesn't accept an argument.
  
  > 1 │ <div v-memo:aaa="[x]"></div>
      │            ^^^^
    2 │ 
  
  ℹ Remove the argument.
  
  ℹ 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-memo.bbb="[x]"></div>

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

  ✖ The v-memo directive doesn't support modifiers.
  
  > 1 │ <div v-memo.bbb="[x]"></div>
      │            ^^^^
    2 │ 
  
  ℹ Remove the modifiers.
  
  ℹ 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-memo></div>

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

  ✖ The v-memo directive is missing a value.
  
  > 1 │ <div v-memo></div>
      │      ^^^^^^
    2 │ 
  
  ℹ Vue skips updating this element until one of the values in the v-memo array changes.
  
  ℹ Add an array of these values, for example v-memo="[item.id, selected]".
  
  ℹ 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
    <div v-for="item in items">
3
        <div v-memo="[item.id]"></div>
4
    </div>
5
</template>

code-block.vue:3:14 lint/nursery/useVueValidVMemo ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-memo directive doesn't work inside an element with v-for.
  
    1 │ <template>
    2 │     <div v-for="item in items">
  > 3 │         <div v-memo="[item.id]"></div>
      │              ^^^^^^
    4 │     </div>
    5 │ </template>
  
  ℹ To use v-memo with v-for, put both directives on the same element.
  
  ℹ 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
    <div v-memo="[valueA, valueB]"></div>
3
    <div v-memo="dependencies"></div>
4
    <div v-for="item in items" :key="item.id" v-memo="[item.id === selected]"></div>
5
</template>