useVueVModel (HTML)

Language HTML

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/useVueVModel
This rule has an unsafe fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/prefer-v-model

How to configure

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

Description

Enforce v-model instead of a prop binding paired with an update: listener that writes the value back.

A component that supports v-model receives a prop, and emits an update: event with the new value when it changes. Binding the prop and writing the new value back by hand, as in :title="title" @update:title="title = $event", does the same thing as v-model:title="title". The v-model form is shorter, and the prop and its listener can’t get out of sync.

For the modelValue prop, the rule suggests the shorter v-model="value" form.

The rule only checks components. It reports a pair when the listener does nothing but assign the new value to the bound expression, written either as value = $event or as (newValue) => value = newValue. Bindings and listeners with modifiers are ignored.

Examples

Invalid

1
<template>
2
  <MyComponent :modelValue="text" @update:modelValue="text = $event" />
3
</template>

1
<template>
2
  <MyComponent :title="title" @update:title="title = $event" />
3
</template>

1
<template>
2
  <MyComponent v-bind:title="title" v-on:update:title="(value) => title = value" />
3
</template>

Valid

1
<template>
2
  <MyComponent v-model="text" />
3
  <MyComponent v-model:title="title" />
4
  <MyComponent :title="title" @update:title="otherTitle = $event" />
5
  <MyComponent :title="title" @update:title="setTitle($event)" />
6
  <MyComponent :title="title" @update:title="title = $event; save()" />
7
</template>