Блог

У меня есть форма, которую мне нужно проверить. Это всего лишь одно поле, которое я указал. Я пытаюсь проверить его с помощью вычисляемого свойства.

 <input 
   type="text"
   v-model="buyerName"
   placeholder="Name"
   autocomplete="on"
   required
>
<span class="errorNotification" >{{validateName}}</span>
 

Это вычисляемое свойство ‘validateName’, которое я использую

 computed: {
  validateName(){
    return (this.buyerName !== "" ? "" : "Enter your name"); 
  }
}
 

Вот как я получаю при загрузке страницы. Есть ли способ отобразить сообщение об ошибке только тогда, когда это поле находится в фокусе?
TIA

Вы можете достичь этого с помощью директивы v-if, установив значение по умолчанию для имени покупателя как null;

Ваше поле ввода:

 <input type="text"
       name="name"
       id="name"
       v-model="buyerName()"
       required>
 <span v-if="errors" class="errorNotification">{{ errors }}</span>
 

Вы используете js-код:

 data:{
  errors:null,
  buyerName:null
},
methods:{
  checkForm:function(e) {
    this.errors = null;
    if (this.buyerName!=null amp;amp; this.buyerName!="") {
      //your actions if form is valid
      console.log("success");
    } else {
      this.errors = "Name required.";
    }
    e.preventDefault();
}
 

}

Проверьте примеры проверки в документе: https://v2.vuejs.org/v2/cookbook/form-validation.html