<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>Vue Js Clear Input Field on Blur</h3>
<input v-model="inputValue" @blur="clearInput" />
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
inputValue: '',
};
},
methods: {
clearInput() {
this.inputValue = '';
},
},
});
</script>
<style scoped>
#app {
margin: 20px;
padding: 20px;
background-color: #f0f0f0;
}
h3 {
font-size: 24px;
margin-bottom: 10px;
}
input {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
input:focus {
outline: none;
border-color: #007bff;
}
</style>
</body>
</html>