[Vuejs]-Adding a condition to a set of elements in Vue.js

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>

Leave a comment