Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Rule proposal: vue/prefer-v-model #2237

Open
@FloEdelmann

Description

Please describe what the rule should do:

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:

<!-- 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 the model definition, see again #2236.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

        AltStyle によって変換されたページ (->オリジナル) /