Add class if field is already filled VueJS - forms

Question

I am new in Vue and I need to add a new class to div.input-box where inside is label and input.
I can try more options after google but nothing to help me.
html:
<form id="form" class="container">
<div class="row justify-content-center mt-5">
<div class="input-box col-lg-6" #click="isActive = 1" :class="{'focus': isActive === 1}">
<label class="input-label">
{{ $t("system.first_name") }}
</label>
<input type="text" class="input-1" v-model="first_name" #focus="isActive = true" #blur="isActive = false">
</div>
<div class="input-box col-lg-6" #click="isActive = 2" :class="{'focus': isActive === 2}">
<label class="input-label">
{{ $t("system.last_name") }}
</label>
<input type="text" class="input-1" v-model="last_name" #focus="isActive = true" #blur="isActive = false">
</div>
</div>
<div class="row justify-content-center">
<div class="input-box col-lg-12" #click="isActive = 3" :class="{'focus': isActive === 3}">
<label class="input-label">
E-mail
</label>
<input type="text" class="input-1" v-model="email" #focus="isActive = true" #blur="isActive = false">
</div>
</div>
</form>
script:
export default {
name: "RegistrationSecondVersion",
data(){
return {
isActive: false,
first_name: null,
last_name: null,
email: null
}
},
methods: {
checkForInput: function (e) {
let input = e.target;
if (input.value != '') {
input.classList.add('focus');
} else {
input.classList.remove('focus');
}
}
}
}
I had added the function in input but I need after filled to get 'focus' class to div.input-box.
Thank you so much!

Answer 1

You need to call checkForInput function whenever an input occurs. On the other hand, I see no need to use #blur and #focus in your case.
Try this:
<form id="form" class="container">
<div class="row justify-content-center mt-5">
<div class="input-box col-lg-6" #click="isActive = 1" :class="{'focus': isActive === 1}">
<label class="input-label">
{{ $t("system.first_name") }}
</label>
<input type="text" class="input-1" v-model="first_name" #input="checkForInput">
</div>
<div class="input-box col-lg-6" #click="isActive = 2" :class="{'focus': isActive === 2}">
<label class="input-label">
{{ $t("system.last_name") }}
</label>
<input type="text" class="input-1" v-model="last_name" #input="checkForInput">
</div>
</div>
<div class="row justify-content-center">
<div class="input-box col-lg-12" #click="isActive = 3" :class="{'focus': isActive === 3}">
<label class="input-label">
E-mail
</label>
<input type="text" class="input-1" v-model="email" #input="checkForInput">
</div>
</div>
</form>