eslint-plugin-vue icon indicating copy to clipboard operation
eslint-plugin-vue copied to clipboard

Rule proposal: `vue/prefer-v-model`

Open FloEdelmann opened this issue 2 years ago • 0 comments

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 https://github.com/vuejs/eslint-plugin-vue/issues/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 https://github.com/vuejs/eslint-plugin-vue/issues/2236.

FloEdelmann avatar Jul 17 '23 07:07 FloEdelmann