1

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

主.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')

登录.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>

在此处输入图像描述

4

1 回答 1

3

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

npm install roboto-fontface

npm install vuetify

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/src/stylus/main.styl'
import 'roboto-fontface/css/roboto/roboto-fontface.css'

Vue.use(Vuetify);

Stylus 需要额外的 npm 插件：

stylus
stylus-loader
vue-style-loader

进一步调试，确保您的所有项目组件都封装在带有v-app标签的布局中，带有 App.vue 文件的标准 vue 项目在其模板中需要 v-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>
于 2019-03-28T08:56:40.547 回答