You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This rule only applies to Vue 3: There, :foo="bar" @update:foo="bar = $event" can be simplified to v-model:foo="bar", and :modelValue="foo" @update:modelValue="foo = $event" can be simplified to v-model="foo". This rule suggests those simplifications. See also https://vuejs.org/guide/components/v-model.html#v-model-arguments
What category should the rule belong to?
[ ] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[x] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
The rule is especially helpful after preparing a Vue 2→3 migration with renaming model props/event in a Vue 3-compatible manner, see also #2236.
Note that this rule doesn't work for Vue 2's :value="…" @input="…", since those prop/event names can be configured per component with the model definition, see again #2236.
The text was updated successfully, but these errors were encountered:
Please describe what the rule should do:
This rule only applies to Vue 3: There,
:foo="bar" @update:foo="bar = $event"
can be simplified tov-model:foo="bar"
, and:modelValue="foo" @update:modelValue="foo = $event"
can be simplified tov-model="foo"
. This rule suggests those simplifications. See also https://vuejs.org/guide/components/v-model.html#v-model-argumentsWhat category should the rule belong to?
[ ] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[x] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
<!-- BAD --> <my-component :modelValue="foo" @update:modelValue="foo = $event" /> <my-component :model-value="foo" @update:model-value="foo = $event" /> <my-component :foo="bar" @update:foo="bar = $event" /> <my-component v-bind:foo="bar" v-on:update:foo="bar = $event" /> <my-component :foo="bar" @update:foo="(foo) => bar = foo" /> <!-- GOOD --> <my-component v-model="foo" /> <my-component v-model:foo="bar" /> <my-component :foo="bar" @update:foo="baz = $event" /> <!-- different variables --> <my-component :foo="bar" @update:foo="updateFoo($event)" /> <!-- function call --> <my-component :foo="bar" @update:foo="(foo) => updateFoo(foo)" /> <!-- function call -->
Additional context
The rule is especially helpful after preparing a Vue 2→3 migration with renaming
model
props/event in a Vue 3-compatible manner, see also #2236.Note that this rule doesn't work for Vue 2's
:value="…" @input="…"
, since those prop/event names can be configured per component with themodel
definition, see again #2236.The text was updated successfully, but these errors were encountered: