I ran into a curious issue involving Vue3 $emit. I was in the process of upgrading my custom Vue2 "form-input" component, which acts as a wrapper for displaying various types of input fields like text-input, select-options, textarea, and more.
This component used to use v-model to bind values and emitted input using "this.$emit('input', this.value)".
With the changes in Vue 3 to use update:modelValue instead of input, I made the necessary adjustments and also added an "Emits" property list to the component. Everything seemed to be functioning properly...
However, I soon noticed that Vue-multiselect 3 (an NPM package "vue-multiselect": "^3.0.0-alpha.2") was emitting a primitive value, specifically an integer, which was not triggering @input on the parent component.
form-input.vue
<input v-if="resolveType === 'text' || resolveType === 'number' || resolveType === 'tel' || resolveType === 'email'"
v-model="localValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
<multiselect v-model="localValue"
class="full-width-tags"
@update:model-value="$emit('update:modelValue', $event)"
/>
// Keep in mind that multiselect's $event is an integer, as verified multiple times through console.log...and when I'm watching for @input on the parent component, it appears that the event listener is triggered by the "text" type field but not by the multiselect. The only difference between these components is that the multiselect emits a primitive value (integer) while the input sends an event object.
Can anyone clarify why event objects and primitive values are treated differently for @input, and how can I adjust my multiselect's emit so that it triggers input events? Currently, I am emitting both "update:modelValue" AND "input" events consecutively for the multiselect, but I'm wondering if there is a simpler solution?