В настоящее время у меня есть форма входа, которая использует 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>
