Vuetify 表单验证，验证错误消息未显示

Question

使用 Vuetify 表单验证，未显示验证错误消息。

我正在使用 Vue.js、Vuetify 和 TypeScript。我试图验证表单，但没有显示我的验证消息。尽管该领域正在变成红色。我还可以看到错误函数被调用

<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>

我不知道为什么我看不到验证错误消息。

Answer 1

我知道在您的 v-text-field 中没有 hide-details 道具，但在我的情况下，这个道具阻止了消息。

Answer 2

我也遇到过同样的问题。 决定 - 将 css 属性 display: block; 添加到类 .v-text-field__details。

Answer 3

假设您的规则在控制台中记录了正确的错误消息，我看不出您的代码有任何问题，但这是我现在正在处理的项目中的一个工作示例。

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

规则在这里

  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.";
      }
    }
  }