When I have an input field, I want to check the content before submitting it. Depending on whether the input is correct or incorrect, I apply a specific class for user feedback:
new Vue({
el: "#app",
data: {
input: ""
},
methods: {
getClass() {
if (this.input == "") {
return "ko";
} else {
return "ok";
}
}
}
});.ok {
border-width: 3px;
border-color: green;
}
.ko {
border-width: 5px;
border-color: red;
}
.initial {
border-width: 1px;
border-color: gray;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="app">
<input v-bind:class="getClass(input)" v-model="input">
</div>Although this setup works well, I wish to have a neutral style applied to the field initially (<input> in the example above) and have the initial class assigned in that scenario.
Is there an easy way to achieve this in Vue? Currently, my solution involves listening to each click event and setting the class accordingly (initial first, then the appropriate one based on content), but this feels cumbersome.
Basically, I don't want any visual indication given to the user until their first interaction with the element.
Any suggestions on how to naturally implement this?