How can I apply a has-error class when an input is invalid and not empty in vue.js?
<div class="form-group">
<input type="email" id="loginEmail" name="loginEmail" v-model="loginEmail" required>
<label for="loginEmail">Email</label>
<div class="icon form">
<icon name="email"></icon>
</div>
</div>
I attempted the following:
<div class="form-group">
<input type="email" id="loginEmail" name="loginEmail" v-model="loginEmail" required>
<label for="loginEmail">Email</label>
<div class="icon form" v-bind:class="loginEmail.checkValidity ? 'has-success' : 'has-error'">
<icon name="email"></icon>
</div>
</div>
Vue Code:
var app = new Vue({
el: '#app',
data: {
loginEmail: ''
}
})
Although this solution displays a class, it remains even after making changes in the input field without refreshing. The has-error class persists.
SOLVED
input:not(:valid):not(:placeholder-shown) + label + .icon.form {
svg {
stroke: red;
}
}
The solution turned out to be surprisingly simple. It was resolved using CSS without relying on vue.js. I regret not thinking of this sooner.