Sometimes, we want to apply filter on v-model in an input field with Vue.js.
In this article, we’ll look at how to apply filter on v-model in an input field with Vue.js.
How to apply filter on v-model in an input field with Vue.js?
To apply filter on v-model in an input field with Vue.js, we replace v-model with the value prop and listen to the input event.
For instance, we write
<template>
<div id="app">
<input :value="date | myDate" @input="date = $event.target.value" />
</div>
</template>
to set the value prop to the value returned by the myDate filter with date as its argument.
Then we listen for the input event and set the date value to $event.target.value when we change the input value.
Conclusion
To apply filter on v-model in an input field with Vue.js, we replace v-model with the value prop and listen to the input event.
