Блог

Я создал форму клиента в своем проекте. Одной из функций я хочу сделать функцию проверки. Если бы я просто использовал метод проверки vuetify, это был бы простой способ, но мне нужно отобразить сообщение о проверке в виде snackbar и каждого текстового поля.

У меня нет никаких идей по отображению сообщений об ошибках проверки в snackbar. Я попытался создать тестовый код ниже. Кто-нибудь мне поможет?

     <template>
  <v-form
    ref="form"
    lazy-validation
  >
    <v-text-field
      v-model="name"
      :counter="10"
      :rules="nameRules"
      label="Name"
      required
    ></v-text-field>

    <v-text-field
      v-model="email"
      :rules="emailRules"
      label="E-mail"
      required
    ></v-text-field>

    <v-btn
      color="success"
      class="mr-4"
      @click="validate()"
    >
      Validate
    </v-btn>
        <v-snackbar v-model="snackbar" :top="true">
            <v-btn @click="dialog=false">close</v-btn>
        </v-snackbar>
  </v-form>
</template>
<script lang="ts">
import {Vue} from 'nuxt-property-decorator'
export default class extends Vue{
    dialog:boolean=false
    snackbar:boolean=false
    name:string=""
    nameRules= [
        (v:string) => !!v || 'Name is required',
        (v:string) => (v amp;amp; v.length <= 10) || 'Name must be less than 10 characters',
    ]   
    email:string=""
    emailRules= [
        (v:string) => !!v || 'E-mail is required',
        (v:string) => /. @. .. /.test(v) || 'E-mail must be valid',
    ] 
    validate(){
        const validationResult=(<any>this.$refs.form).validate()
        if(!validationResult){
        return (this.snackbar = true) 
        }
    }
}
</script>
  

Добавьте данные сообщения в свой компонент snackbar.

  <v-snackbar v-model="snackbar" :top="true">
    {{ text }}
    <v-btn @click="dialog=false">close</v-btn>
 </v-snackbar>
  

В ваших данных

 data(){
    return {
       text: null
    }
}
  

В вашем методе проверки

     const validationResult=(<any>this.$refs.form).validate()
    if(!validationResult){
        this.text = "Error validation"   // or get the validation error message 
        this.snackbar = true
    }