useVueValidVModel (HTML)

Language HTML

Summary

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

How to configure

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

Description

Enforce valid v-model directives.

v-model keeps a form field and a variable in sync: when the user types, Vue writes the new value back to the variable. This only works in some places, and only with a value that Vue can write to.

This rule reports v-model directives that:

are placed on an element other than <input>, <select>, <textarea>, or a component, such as <div v-model="foo">;
are placed on a file input, such as <input type="file" v-model="foo">; the browser doesn’t let code set the file of a file input;
have an argument on a native element, such as <input v-model:foo="bar">; only components accept an argument;
have a modifier other than .lazy, .number, or .trim on a native element, such as <input v-model.foo="bar">;
have no value, such as <input v-model>;
have a value that can’t be assigned to, such as <input v-model="foo + bar">;
read their value with optional chaining (?.), such as <input v-model="foo?.bar">;
read a property of a value that may be null or undefined, such as <input v-model="(foo?.bar).baz">;
write to a variable of a v-for or v-slot, such as <input v-for="item in items" v-model="item">; a new value for these variables wouldn’t reach the list or the slot data they were read from.

Examples

Invalid

1
<template>
2
  <div v-model="foo"></div>
3
</template>

code-block.vue:2:8 lint/nursery/useVueValidVModel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-model directive can't be used on <div> elements.
  
    1 │ <template>
  > 2 │   <div v-model="foo"></div>
      │        ^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Vue can only keep <input>, <select>, <textarea>, and components in sync with a variable.
  
  ℹ Move the directive to a form field or a component, or bind the value with v-bind and listen for changes with v-on.
  
  ℹ 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 v-model:foo="bar" />
3
</template>

code-block.vue:2:17 lint/nursery/useVueValidVModel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The v-model directive doesn't accept an argument on native elements.
  
    1 │ <template>
  > 2 │   <input v-model:foo="bar" />
      │                 ^^^^
    3 │ </template>
    4 │ 
  
  ℹ Only components accept an argument, which names the prop to keep in sync.
  
  ℹ 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
<template>
2
  <input v-model />
3
</template>

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

  ✖ This v-model directive is missing a value.
  
    1 │ <template>
  > 2 │   <input v-model />
      │          ^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ The value names the variable that Vue keeps in sync with the field.
  
  ℹ Add a value to the directive, e.g. v-model="message".
  
  ℹ 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 v-model="foo + bar" />
3
</template>

1
<template>
2
  <input v-model="foo?.bar" />
3
</template>

1
<template>
2
  <div v-for="todo in todos">
3
    <input v-model="todo" />
4
  </div>
5
</template>

Valid

1
<template>
2
  <input v-model="foo" />
3
  <input v-model.lazy="foo" />
4
  <textarea v-model="foo"></textarea>
5
  <MyComponent v-model="foo" />
6
  <MyComponent v-model:propName.modifier="foo" />
7
  <div v-for="todo in todos">
8
    <input v-model="todo.name" />
9
  </div>
10
</template>