Subscribe on changes!

Will the "Options / model" be permanently removed?

avatar
Sep 10th 2020

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

avatar
Sep 10th 2020

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