.input-section {
border-radius: 4px;
width: 359px;
height: 42px;
line-height: 42px;
padding: 0 45px;
border-radius: 4px;
border: solid 1px #b1b8c9;
background-color: #ffffff;
}<input
type="text"
name="fullname"
id="fullname"
v-model="fullname"
v-model.trim="$v.fullname.$model"
:class="{ 'is-invalid': validationStatus($v.fullname) }"
class="input-section"
v-on:keypress="isLetter($event)"
placeholder="Enter your name"
/>
<input
class="input-section label-set"
type="text"
id="mobile"
v-model="mobile"
v-model.trim="$v.mobile.$model"
:class="{ 'is-invalid': validationStatus($v.mobile) }"
placeholder="Enter your mobile number"
v-on:keypress="isMobile($event)"
/>How can we dynamically change the border color of an input field based on user interaction? For example, if a user tries to enter a mobile number without entering their full name, the border of the fullname input should turn red.
Is it possible to alter the border color using a conditional class like ':class="{ 'is-invalid': validationStatus($v.fullname) }'?