未定义的（在承诺中）typeerror：无法读取未定义的属性（阅读＆＃x27; $消息＆＃x27;）

Question

我正在尝试在Vuejs网站上使用Vuelidate库进行我的寄存器表单验证。显示错误消息的方式是使用$ errors属性来显示它，并且可以很好地显示它我在现场输入。

这是模板代码：

  <form @submit.prevent="register()" class="mb-3">
            <div class="form-floating mb-3">
              <input
                type="email"
                class="form-control rounded-0"
                id="floatingInput"
                placeholder="[email protected]"
                v-model="state.form.email"
                @blur="v$.form.email.$touch"
              />
              <label for="floatingInput">Email</label>
              <span v-if="v$.form.email.$error" style="color: red">
                {{ v$.form.$errors[0].$message }}
              </span>
            </div>

import store from "../store";
import router from "../router";
import { required, email,  minLength, minValue  } from "vuelidate/lib/validators";
import useVuelidate from "@vuelidate/core";
import { helpers} from "@vuelidate/validators";
import { reactive, computed } from "vue";
export default {
  name: "Register",
  setup() {
    const state = reactive({
      form: {
        email: "",
        password: "",
        confirm: "",
        username: "",
      },
    });
    const myRequired = helpers.withMessage(
    'This field is required',
    required,
    );
    const minLengthvalidate = helpers.withMessage(
      'Password required at leaset 8 characters',
      minLength,
    );

    const minVlaueValidate = helpers.withMessage(
      'Password must include at least one special symbols',
      minValue,
    );

    const emailErrorMessage = helpers.withMessage(
      'This is not a valide email address',
      email
    );
    
    const rules = computed(() => {
      return { 
        form: {
          email: {
            required:myRequired,
            email:emailErrorMessage,
          },
          password: {
            required:myRequired,
            minLength:minLengthvalidate,
            minValue:minVlaueValidate,
          },
        },
      };
    });

    const v$ = useVuelidate(rules, state);

    return {
      state,
      v$,
    };
  },
  methods: {
    register() {
      this.v$.$validate();
      console.log(this.v$);
      if (!this.v$.$error) {
        store
          .dispatch("register", this.form)
          .then((res) => {
            //router.push('/verifying')
            console.log("still here");
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        console.log("Field required");
        console.log(this.v$.form.$errors[0].$message)
       
      }
    },
  },
};
</script>

Answer 1

改变条件：

 <span v-if="v$.form.email.$error" style="color: red">
      <template v-if="v$.form.$errors && v$.form.$errors.length">
         {{ v$.form.$errors[0].$message }}
      </template>
  </span>