typescript - Validación de formularios en Vuetify, el mensaje de error de validación no se muestra

Usando la validación de formularios de Vuetify, el mensaje de error de validación no se muestra.

Estoy usando Vue.js, Vuetify y TypeScript. Estaba intentando validar un formulario pero mis mensajes de validación no se están mostrando. Aunque el campo se pone en rojo. También puedo ver que la función de error se está llamando

<template>
  <v-layout row justify-center>
    <v-dialog v-model="show" persistent max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">Testing validations</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-form v-model="form.valid" ref="form">
              <v-layout wrap>
                <v-flex xs12>
                  <v-text-field
                    label="Checklist Name"
                    v-model="list.name"
                    :rules="[errorFunc]"
                    name="checklist"
                  ></v-text-field>
                </v-flex>
              </v-layout>
            </v-form>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="add">Save</v-btn>
          <v-btn color="blue darken-1" flat @click="show = false">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from "vue-property-decorator";

  @Component({
    components: {}
  })
  export default class listForm extends Vue {
    @Prop() visible!: boolean;

    form = {
      valid: false
    };

    list = {
      name: ""
    };

    errorFunc() {
      let val: any;
      if (this.list.name.length >= 3) {
        val = true;
      } else {
        val = "Errorrrr";
      }
      console.log(val);
      return val;
    }

    get show() {
      return this.visible;
    }
    set show(value) {
      if (!value) {
        this.$emit("close");
      }
    }
    add() {
      if (this.$refs.form.validate()) {
        this.$emit("save", this.list);
      }
    }
  }
</script>

No estoy seguro de por qué no puedo ver el mensaje de error de validación.

Respuesta #1

Asumiendo que tus reglas registran el mensaje de error correcto en la consola, no puedo ver nada mal con tu código, pero aquí hay un ejemplo que funciona del proyecto en el que estoy trabajando ahora mismo.

  <v-text-field 
    v-model="data.editedItem.email" 
    label="Email" 
    :rules="[data.rules.required, data.rules.email]" 
  </v-text-field>

y las reglas están aquí

  data: {
    rules: {
      required: value => !!value || "Required.",
      email: value => {
        const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return pattern.test(value) || "Must be a valid e-mail.";
      }
    }
  }

Respuesta #2

Sé que en tu v-text-field no hay una propiedad hide-details, pero en mi caso esta propiedad estaba bloqueando el mensaje.