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

使用Vuetify表单验证时，验证错误消息不会显示

我正在使用Vue.js、Vuetify和TypeScript。我试图验证表单，但未显示我的验证消息。虽然田野正在变红。我还可以看到调用func时出错

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

测试验证
拯救
接近

从“Vue属性装饰器”导入{Component，Prop，Vue}；
@组成部分({
组件：{}
})
导出默认类listForm扩展Vue{
@Prop（）可见！：布尔值；
表格={
有效：假
};
列表={
姓名：“
};
errorFunc（）{
让瓦尔：任何；
如果（this.list.name.length>=3）{
val=真；
}否则{
val=“Errorrrr”；
}
控制台日志（val）；
返回val；
}
搞秀{
返回这个.visible；
}
设置显示（值）{
如果（！值）{
本.$emit（“close”）；
}
}
添加（）{
if（此.$refs.form.validate（））{
此.$emit（“保存”，此.list）；
}
}
}

---

我不确定为什么看不到验证错误消息。

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

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

！！值| |“必需”，
电子邮件：value=>{
常量模式=/^（[^（）[\]\\，；：\s@“]+（\.[^（）[\]\，；：\s@“]+）*）（“+”）@（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.]124；（[a-zA Z-0-9]++]）[a-zA Z]{2，$/；
返回模式。test（value）| |“必须是有效的电子邮件。”；
}
}
}

---

我也遇到了同样的问题决策-添加css属性

显示：块

到class

.v-text-field\uu详细信息

我知道在你的v-text-field中没有一个隐藏详细信息道具，但在我的情况下，这个道具阻止了消息。

有没有hepl请告诉我？我还可以看到带有验证错误的标签。只是看不到它在电视上UI@user1739163-我在帖子中添加了我的DOM截图。检查节点是否存在，但不可见。是的，我也可以看到节点。当我从下面的css中删除display:none时，它会工作。v-text-field_uudetails{display:none；}。我怎样才能修复它？@user1739163-我无法复制它。v-text-field_uu详细信息对我来说总是{display:flex；}。我没有显示：层次结构中的任何位置都没有显示。尝试向错误消息、消息和提示属性添加值。尝试添加持久提示属性。这里有更多关于它们的信息：

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