I'm currently working on creating a wrapper component for an <input/> element in Vue.js.
Here is the component code:
<template>
<div>
<input v-bind="$attrs" :value="value" @input="input" />
...
</div>
<template>
Vue.component("my-input", {
inheritAttrs: false,
props: ['value'],
methods: {
input($event): void {
this.$emit("input", $event.target.value)
}
}
})
Usage example:
<my-input v-model="myModel" />
So far, everything seems to be functioning correctly. The model updates through the input event handler by emitting the value of the target element.
However, I encountered an issue when trying to integrate this component with existing code:
<my-input v-model="myModel2" @input="something = $event.target.value" />
The problem arises with the $emit("input") event. An error message stating "Cannot read property 'value' of undefined" is displayed.
This means that the $emit function is emitting the value separately, causing difficulties for the existing @input="something..." event handler to access the $event properly.
If the component's input method is modified to emit the entire $event instead of just $event.target.value, the new code functions as intended. However, the model now captures the InputEvent rather than the actual value.
At this point, I am uncertain about the next steps needed to resolve this dilemma.