Trying to create a customized component that mimics an input field with validation, I'm encountering issues with getting @Change, @blur, and other events to function properly as they would on a standard input field.
This is the structure of my custom component:
// custom-input.html
<div>
<multiselect
v-if="hasOptions"
v-model="selected"
:options="optionsList"
:name="name"
:searchable="false"
:allow-empty="false"
:maxHeight="1000"
track-by="date"
label="label"
placeholder="Please select"
key="select"
>
</multiselect>
<input
v-if="!hasOptions"
type="text"
pattern="[0-9]*"
inputmode="numeric"
v-model="selected"
v-input-mask="'date'"
v-suppress-aria-invalid
key="input"
:name="name"
/>
</div>
Below is an example of how the component is used within another component:
// parent-form.component.html
<custom-input
:initial="exampleDay"
:name="'exampleDay'"
v-model="exampleDay"
@blur="v$.exampleDay.$touch"
@change="v$.exampleDay.$touch">
</custom-input>
The error message received is:
Component emitted event "blur" but it is neither declared in the emits option nor as an "onBlur" prop.