Как применить красный или зеленый фон для недействительных или действительных данных в vee validate 4 ⇐ CSS

[Anonymous]

У меня проблема. У меня есть эта форма, и когда поля формы не трогаются, я не хочу, чтобы отображались какие-либо ошибки или цвета, но когда я касаюсь одного из полей или изменяю поля, мне нужен зеленый или красный цвет в зависимости от действительности или недействительности.
Первая попытка:
При поиске я обнаружил, что это можно написать на CSS:

Код: Выделить всё

input:valid {
border-color: green;
}

input:invalid {
border-color: red;
}

Но проблема в том, что у меня нет никакого контроля. И получать красные поля, когда я ничего не трогаю.
Итак, одна из моих других попыток — использовать динамическую привязку классов и менять цвет, если есть ошибка или нет:

Код: Выделить всё

Registrera
Username




Email



Password






Submit
Login





import { mapActions } from "vuex";
import { Form, Field, ErrorMessage } from "vee-validate";
import * as yup from "yup";
export default {
name: "RegisterComponent",
components: {
Form,
Field,
ErrorMessage,
},
data() {
const schema = yup.object({
email: yup
.string()
.required("email is required")
.email("must be a valid email"),
username: yup
.string()
.required("username is required")
.min(4)
.matches(
/^(?=.*[a-zA-Z]{1,})(?=.*[\d]{0,})[a-zA-Z0-9]{1,15}$/gm,
"must contain letters and numbers"
),

password: yup
.string()
.required("password is required")
.min(8)
.matches(
/^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,16}$/gm,
"must contain 8 characters, one uppercase, one lowercase, one number and one special case character"
),
passwordConfirmation: yup
.string()
.required("password confirmation is required")
.oneOf([yup.ref("password")], "passwords do not match"),

// passwordConfirmation: yup
//   .string()
//   .oneOf([yup.ref("password"), null], "Passwords must match"),
});
return {
schema,
errorInput1: null, //Changes applied
errorInput2: null, //Changes applied
errorInput3: null, //Changes applied
};
},
methods: {
// v-model bindings
submit(values) {
delete values.passwordConfirmation;
this.register(values).then(() =>  {
this.$router.push("/Login");
});
};

Но эта попытка приводит к пустой странице и этой ошибке:
Vue alert]: необработанная ошибка во время выполнения планировщика
Необработано (в обещании) TypeError: невозможно прочитать свойства неопределенного значения (чтение «errorInput1»)

Подробнее здесь: https://stackoverflow.com/questions/702 ... ata-in-vee