Will the "Options / model" be permanently removed?
What problem does this feature solve?
I am developing a UI Library based on VUE3 (https://github.com/all-task/at-ui-vue3).
I am very happy to see the improvement of v-model in VUE3. But I found that VUE 3 has removed the "Options / model" setting. I think this will make dev and use of components more complicated.
For example a checkbox component.
// VUE2 - Dev Component
export default {
name: 'CheckboxGroup',
model: {
prop: 'checked',
event: 'change',
},
props: {
checked: {
type: Array,
default: () => ([]),
},
}
methods: {
onChange() {
this.$emit('change', newChecked);
}
}
}
// VUE2 - Use Component
<checkbox-group
v-model="checked"
:options="options"
/>
// VUE 3 - Dev Component
export default {
name: 'CheckboxGroup',
props: {
checked: {
type: Array,
default: () => ([]),
},
}
setup(props, context) {
return {
onChange() {
context.emit('change', newChecked);
context.emit('update:checked', newChecked);
}
}
}
}
// VUE3 - Use Component
const checked = ref([]);
//....
<checkbox-group
v-model:checked="checked"
:options="options"
/>
In VUE3, When you want to provide both "v-model" and "event" mode in your component. You need to emit multiple times. This will complicate the situation at some point. like: https://github.com/all-task/at-ui-vue3/blob/master/components/AtTable/AtTable.vue Line: 194 - 241 . Of course I can write a function to take these repeating work. But I feel "Options / model" is a smarter way to set a default event.
At the same time, when you using these components. You need to remember the prop. name for 'v-model'. At different components may be different prop. name. This complicates the situation. Because VUE2 has "Options / model", You can set a default prop. for 'v-model', I think this is a more friendly way when using a series of components.
What does the proposed API look like?
Hope to keep the VUE2 "Options / model" setting in VUE3 for default "v-model" prop. . Or provide other alternatives.
V2: https://vuejs.org/v2/api/#v-model ; https://vuejs.org/v2/api/#model
V3: https://v3.vuejs.org/guide/migration/v-model.html#overview
This breaking change went through an RFC and is documented https://v3.vuejs.org/guide/migration/v-model.html#_3-x-syntax
In short, name your prop modelValue
to use v-model