1👍
✅
You can use Watchers; your form will be this like this:
<form action="">
<div class="inputs">
<div>
<label for="Day">Day</label>
<input type="number" placeholder="DD" id="Day" v-model="years" />
<p class="empty-error">{{required_years}}</p>
</div>
<div>
<label for="Month">Month</label>
<input type="number" placeholder="MM" id="Month" v-model="months" />
<p class="empty-error">{{required_months}}</p>
</div>
<div>
<label for="Year">Year</label>
<input type="number" placeholder="YYYY" id="Year" v-model="days" />
<p class="empty-error">{{required_days}}</p>
</div>
</div>
<div class="submit">
<div class="submit-btn">
<img src="../assets/images/icon-arrow.svg" alt="" />
</div>
</div>
</form>
Now, in the <script>
tag, you can use a watch method like this:
<script>
export default {
data()
{
return{
years:'',
months:'',
days:'',
required_years:'',
required_months:'',
required_days:'',
};
},
watch:{
months:function(new_value,old_value){
if(new_value == ''){
this.required_months = 'This field is required'
}
else
{
this.required_months = ''
}
},
years:function(new_value,old_value){
if(new_value == ''){
this.required_years = 'This field is required'
}
else
{
this.required_years = ''
}
},
days:function(new_value,old_value){
if(new_value == ''){
this.required_days = 'This field is required'
}
else
{
this.required_days = ''
}
},
}
}
</script>
Source:stackexchange.com