Vue.js Vuetify错误消息颜色未显示

我目前有一个使用vuetify和vuelidate的登录表单。Vuetify用于创建表单和显示错误消息，而vuelidate用于验证用户输入。我的问题是错误消息没有显示为红色。下面是我的代码和登录表单的屏幕截图

Main.js

import Vue from 'vue'
import App from './App.vue'
import Vuelidate from 'vuelidate'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)
Vue.use(Vuelidate)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Login.vue

<template>
  <!-- v-container is used to center the contents -->
  <v-container>
    <v-form>
      <v-flex xs12 sm10 md8 lg6>
        <v-text-field
          label="Full Name"
          v-model.trim="fullName"
          @input="$v.fullName.$touch()"
          :counter="10"
          :error-messages="fullNameErrors"
        ></v-text-field>
      </v-flex>
      <v-flex xs12 sm10 md8 lg6>
        <v-text-field
          label="Email"
          v-model.trim="email"
          @input="$v.email.$touch()"
          :error-messages="emailErrors"
        ></v-text-field>
      </v-flex>
      <v-flex xs12 sm10 md8 lg6>
        <v-text-field
          label="Password"
          v-model.trim="password"
          @input="$v.password.$touch()"
          :error-messages="passwordErrors"
        ></v-text-field>
      </v-flex>
      <v-btn @click="submit">submit</v-btn>
      <v-btn @click="clear">clear</v-btn>
    </v-form>
  </v-container>
</template>

<script>
import { required, email, maxLength } from "vuelidate/lib/validators";
export default {
  data() {
    return {
      fullName: "",
      email: "",
      password: ""
    };
  },
  validations: {
    email: {
      required,
      email
    },
    password: {
      required
    },
    fullName: {
      required,
      maxLength: maxLength(10)
    }
  },
  computed: {
    fullNameErrors() {
      const errors = [];
      if (!this.$v.fullName.$dirty) return errors;
      !this.$v.fullName.maxLength &&
        errors.push("Name must be at most 10 characters long");
      !this.$v.fullName.required && errors.push("Name is required.");
      return errors;
    },
    emailErrors() {
      const errors = [];
      if (!this.$v.email.$dirty) return errors;
      !this.$v.email.email && errors.push("Must be valid e-mail");
      !this.$v.email.required && errors.push("E-mail is required");
      return errors;
    },
    passwordErrors() {
      const errors = [];
      if (!this.$v.password.$dirty) return errors;
      !this.$v.password.required && errors.push("Password is required");
      return errors;
    }
  },
  methods: {
    submit() {
      this.$v.$touch();
    },
    clear() {
      this.$v.$reset();
      this.fullName = "";
      this.email = "";
      this.password = "";
    }
  }
};
</script>

提交
清楚的
从“vuelidate/lib/validators”导入{required，email，maxLength}；
导出默认值{
数据（）{
返回{
全名：“，
电邮：“，
密码：“
};
},
验证：{
电邮：{
必修的，
电子邮件
},
密码：{
必修的
},
全名：{
必修的，
maxLength:maxLength（10）
}
},
计算：{
fullNameErrors（）{
常量错误=[]；
如果（！this.$v.fullName.$dirty）返回错误；
！此.$v.fullName.maxLength&&
错误。推送（“名称长度不得超过10个字符”）；
！this.$v.fullName.required&&errors.push（“Name是必需的”）；
返回错误；
},
电子邮件错误（）{
常量错误=[]；
如果（！this.$v.email.$dirty）返回错误；
！this.$v.email.email&&errors.push（“必须是有效的电子邮件”）；
！this.$v.email.required&&errors.push（“需要电子邮件”）；
返回错误；
},
密码错误（）{
常量错误=[]；
如果（！this.$v.password.$dirty）返回错误；
！this.$v.password.required&&errors.push（“需要密码”）；
返回错误；
}
},
方法：{
提交（）{
这个。$v.$touch（）；
},
清除（）{
这个。$v.$reset（）；
this.fullName=“”；
this.email=“”；
此密码为“”；
}
}
};

---

看起来它缺少一些CSS和字体。 我正在使用手写笔导入，没有任何问题

npm install roboto-fontface

npm install vuetify

---

手写笔需要额外的npm插件：

stylus
stylus-loader
vue-style-loader

进一步调试，确保所有项目组件 封装在带有v-app标记的布局中，带有app.vue文件的标准vue项目希望在其模板中包含v-app标记

App.vue：

<template>

  <v-app>

    <login />

  </v-app>

</template>

v-app生成以下包装器div标记，这些标记对于应用于内容的样式至关重要：

<div data-app="true" class="application theme--light" id="app">
  <div class="application--wrap">
     code injects here
  </div>
</div>

代码在这里注入

我安装了额外的插件并导入了“vuetify/src/stylus/main.styl”。但它仍然不起作用我相信你的Vue.app文件中缺少了v-app标签，我更新了我的答案。

<div data-app="true" class="application theme--light" id="app">
  <div class="application--wrap">
     code injects here
  </div>
</div>