Как проверить пустую v-модель и показать ошибку перед отправкой

Question

У меня есть тег ввода, выбор изображения и кнопка отправки. Мне нужно запретить отправку, если пользователь ничего не вводил. Я пытался так, но это не работает. У кого есть и идея как это предотвратить

Я использую V-модель для входов

     <select class="form-control" v-model="selected"  required>
         <option value="">SELECT A USER</option>
     <option v-for="user in users"  v-bind:value="user.id" >{{ user.first_name }}&nbsp;{{ user.last_name }}</option>
 </select>



<textarea id="post-box" class="post-box"   v-model="kudodescription" placeholder="What's on your mind" style="max-width:98%; min-width:98%; border:none; font-size: 16px;"  ></textarea>

<button  v-on:click="addKudoPost(authuser)" class="[ btn btn-primary ] pull-left" style="margin-top:0.8%;margin-right:1%;">Post Kudo</button>


<div class="col-md-6">



    <div  v-for="(kudo, index) in catkudo" class="class" v-bind:class="{ active: isActive == index }" >
        <div    @click="changeSelected(index)" >
            <img  style="width:40%"   v-bind:value="kudo.id" @click="select(kudo.id)"   v-model="kudocat"  :src="'/kudosuploads/badges/'+kudo.image" alt=""  >
        <p >{{ kudo.catname }}</p>
        </div>
    </div>



</div>

</div>

метод Vue, как следует

   // Add Kudo 

  addKudoPost: function(profile_id){


      if(this.kudodescription === null)
      {
            console.log("Error Occured");
      }else
      {
            var formkudodata = new FormData();

    formkudodata.append('kudodescription', this.kudodescription);

    formkudodata.append('kudouser', this.selected);

    formkudodata.append('kudoimage', this.clickimage);



    axios.post('/addNewsFeedKudoPost', formkudodata)
        .then(response=>{

        console.log(this);
        if(response.status===200){

          this.kudodescription = "";


        axios.get('/getNewsFeedPosts')
   .then(response => {
      this.posts = response.data.posts; 
      this.birthdays = response.data.birthdays; 

      console.log(response.data.posts);

      this.newsfeedPostImages();

  })
   .catch(function (error) {
      console.log(error);
  });

       }
   })
    .catch(function (error) {
       if(error.response.status == 422) {
           this.errors = error.response.errors
       }
    });

      }



},

Если пользователь не ввел что-то, как я могу предотвратить отправку формы и отобразить ошибку

Answer 1

В ваших методах добавьте метод проверки формы:

checkForm: function (e) {
  if (this.name && this.age) { //change these to your required field names
    this.addKudoPost(this.authuser);
  }

  this.errors = [];

  if (!this.name) { //change these to your required field names
    this.errors.push('Name required.');
  }
  if (!this.age) { //change these to your required field names
    this.errors.push('Age required.');
  }

  e.preventDefault();
}

Answer 2

может быть любым из этого.v-on: submit.prevent = "onSubmit" v-on: click.prevent = "select (kudo.id)" *

Я не знаю, куда вы отправляете, но отметьте это события , если вы хотите узнать больше.