In this answer, I will share how do you implement model on custom input components. The custom events can also be used to create custom inputs that work with v-model. The inside the component must follow below rules:
1. Bind the value attribute to a value prop
2. On input, emit its own custom input event with the new value.
Let’s take a custom-input component as an example,
1 2 3 4 5 6 7 8 9 | Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" /> ` }) |
Now you can use v-model with this component,
1 | <custom-input v-model="searchInput"></custom-input> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
