Make a work correct with v-models without arguments in form components

This function solves the problem (这个功能解决的问题)

v-model=“…” doesn’t work in Form components

Expected API (期望的 API)

Now form components work only if you put v-model:value=“…” tag, but v-model=“…” doesn’t work. vue can use v-model by default without argument value. For this need to add anywhere

emits: ['update:value'] //(emits: ['update:checked'] in checkox)

As described in https://v3.vuejs.org/guide/migration/v-model.html#migration-strategy

for all v-models without arguments, make sure to change props and events name to modelValue and update:modelValue respectively

export default {
  props: {
    modelValue: String // previously was `value: String`
  },
  emits: ['update:modelValue'],
  methods: {
    changePageTitle(title) {
      this.$emit('update:modelValue', title) // previously was `this.$emit('input', title)`
    }
  }
}

https://v3.vuejs.org/guide/migration/v-model.html#overview

BREAKING: When used on custom components, v-model prop and event default names are changed: prop: value -> modelValue; event: input -> update:modelValue;

[07akioni]

Not using modelValue is by design. The so called modelValue has no semantic meaning and could be ambiguous (both in API design level and implementation level.)

Explicit is better than impilicit.

[07akioni]

Maybe you are right, I didn’t test it, in vue2 was “model” option where can modify event and value names… Perhaps in vue3 it’s impossible. Sorry for disturb. Its a habit from vue2 to use v-model

Try to accept a new pattern. Making everything explicit will make your project more maintainable. Every other people who see your code will immediately know what you tried to do.