Vue Js Clear Input Field on Blur:In Vue.js, you can clear an input field when it loses focus (i.e., on blur) by using a combination of v-model and a @blur event listener. First, bind the input field to a data property using v-model. Then, add a @blur listener to the input field that sets the data property to an empty string when the input field loses focus. This way, when the user clicks away from the input field, the data property will be updated and the input field will be cleared.
How can you Vue Js clear input field when it loses focus using the “blur” event?
When the user clicks outside of the input field (i.e., the input field loses focus), the blur event will be triggered, and the clearInput method will be called. Inside the clearInput method, the inputValue data property will be set to an empty string, which will clear the input field.
Vue Js Clear Input Field on Blur Example
<div id="app">
<input v-model="inputValue" @blur="clearInput" />
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
inputValue: '',
};
},
methods: {
clearInput() {
this.inputValue = '';
},
},
});
</script>
Output of Vue Js Clear Input Field on Blur
