[Vue 警告]：在渲染期间访问了属性“字段”，但未在实例上定义。 （不是通常的）

Posted 2023-02-22

【中文标题】[Vue 警告]：在渲染期间访问了属性“字段”，但未在实例上定义。 （不是通常的）

【英文标题】：[Vue warn]: Property "field" was accessed during render but is not defined on instance. (not the usual one)

【发布时间】：2021-12-28 14:36:49

【问题描述】：

我正在使用 vee-validate 和 firebase，它一直抛出这个错误。

它似乎在诅咒验证模式，并且没有在实例上声明它，但它确实被定义了。

我已经阅读了关于这个的多个线程，这发生在 v-models 上，而不是定义属性和绑定，等等。在我的情况下，我无法弄清楚似乎是什么问题。 我也更新了 repo，以防万一它也有帮助 https://github.com/Eternal-uz/ICGroup

<template>
  <div 
  v-if="reg_show_alert"
  :class="reg_alert_variant"
  class="text-white text-center rounded font-bold p-5 mb-4"
  >
     reg_alert_message 
  </div>
  <vee-form
    :validation-schema="schema"
    @submit="register"
    :initial-values="userData"
    class="overflow-hidden"
  >
    <!-- Name -->
    <div class="mb-3">
      <label class="inline-block mb-2">Ism</label>
      <vee-field
        type="text"
        name="ism"
        class="
          block
          w-full
          py-1.5
          px-3
          text-gray-800
          border border-gray-300
          transition
          duration-500
          focus:outline-none focus:border-black
          rounded
        "
        placeholder="Ismingizni Yozing"
      />
      <ErrorMessage class="text-red-600" name="ism" />
    </div>
    <!-- Email -->
    <div class="mb-3">
      <label class="inline-block mb-2">Email</label>
      <vee-field
        name="email"
        type="email"
        class="
          block
          w-full
          py-1.5
          px-3
          text-gray-800
          border border-gray-300
          transition
          duration-500
          focus:outline-none focus:border-black
          rounded
        "
        placeholder="Emailni kiriting"
      />
      <ErrorMessage class="text-red-600" name="email" />
    </div>
    <!-- Age -->
    <div class="mb-3">
      <label class="inline-block mb-2">Yosh</label>
      <vee-field
        name="age"
        type="number"
        class="
          block
          w-full
          py-1.5
          px-3
          text-gray-800
          border border-gray-300
          transition
          duration-500
          focus:outline-none focus:border-black
          rounded
        "
      />
      <ErrorMessage class="text-red-600" name="age" />
    </div>
    <!-- Password -->
    <div class="mb-3">
      <label class="inline-block mb-2">Parol</label>
        <vee-field
          name="password"
          type="password"
          class="
            block
            w-full
            py-1.5
            px-3
            text-gray-800
            border border-gray-300
            transition
            duration-500
            focus:outline-none focus:border-black
            rounded
          "
          placeholder="Parol"
          v-bind="field"
        />
      <ErrorMessage class="text-red-600" name="password" />
    </div>
    <!-- Confirm Password -->
    <div class="mb-3">
      <label class="inline-block mb-2">Parolni Tasdiklash</label>
      <vee-field
        name="confirm_password"
        type="password"
        class="
          block
          w-full
          py-1.5
          px-3
          text-gray-800
          border border-gray-300
          transition
          duration-500
          focus:outline-none focus:border-black
          rounded
        "
        placeholder="Parolni Tasdiklang"
      />
      <ErrorMessage class="text-red-600" name="confirm_password" />
    </div>
    <!-- County -->
    <div class="mb-3">
      <label class="inline-block mb-2">Viloyat</label>
      <vee-field
        as="select"
        name="country"
        class="
          block
          w-full
          py-1.5
          px-3
          text-gray-800
          border border-gray-300
          transition
          duration-500
          focus:outline-none focus:border-black
          rounded
        "
     >
        <option value="Andijon">Andijon</option>
        <option value="Buxora">Buxora</option>
        <option value="Farg'ona">Farg'ona</option>
        <option value="Jizzax">Jizzax</option>
        <option value="Urganch">Urganch</option>
        <option value="Namangan">Namangan</option>
        <option value="Navoi">Navoi</option>
        <option value="Qashqadaryo">Qashqadaryo</option>
        <option value="Samarkand">Samarkand</option>
        <option value="Sirdaryo">Sirdaryo</option>
        <option value="Surxondaryo">Surxondaryo</option>
        <option value="Tashkent">Tashkent</option>
        <option value="Karakalpakston">Karakalpakston</option>
      </vee-field>
      <ErrorMessage class="text-red-600" name="country" />
    </div>
    <!-- TOS -->
    <div class="mb-3 pl-6">
      <vee-field
        name="tos"
        type="checkbox"
        value="1"
        class="w-4 h-4 float-left -ml-6 mt-1 rounded"
      />
      <label class="inline-block">Accept terms of service</label>
      <ErrorMessage class="text-red-600" name="tos" />
    </div>
    <button type="submit" :disabled="reg_in_submission"
      class="
        block
        w-full
        bg-blue-500
        text-white
        py-1.5
        px-3
        rounded
        transition
        hover:bg-blue-600
      "
    >
      Submit
    </button>
  </vee-form>
</template>

<script>
// import   auth,  from '@/includes/firebase';
export default 
  name: "Register",
  data() 
    return 
      schema: 
        ism: "required|min:3|max:100|alpha_spaces",
        email: "required|min:3|max:100|email",
        age: "required|min_value:18|max_value:100|",
        parol: "required|min:3|max:32",
        confirm_password: "confirmed:@password",
        country: "required|country_excluded:Karakalpakston",
        tos: "tos",
        genre: "required"
      ,
      userData: 
        country: "Tashkent",
      ,
      reg_in_submission: false,
      reg_show_alert: false,
      reg_alert_variant: "bg-blue-500",
      reg_alert_message: "Iltimos, hisobingiz yaratilishini kuting",
    ;
  ,
  methods: 
    async register(values) 
      console.log('click')
      this.reg_show_alert = true;
      this.reg_in_submission = true;
      this.reg_alert_variant = "bg-blue-500";
      this.reg_alert_message = "Iltimos, hisobingiz yaratilishini kuting";
      let userCred = null;
      try 
        await this.$store.dispatch('register', values);
        // userCred = await auth.createUserWithEmailAndPassword(
        //         values.email,
        //         values.password,
        // );
       catch (error) 
        this.reg_in_submission = false;
        this.reg_alert_variant = "bg-red-500";
        this.reg_alert_message =
          "Kutilmagan xatolik yuz berdi, keyinroq qayta urinib ko'ring";
        return;
      
     
      this.reg_show_variant = "bg-green-500";
      this.reg_show_message = "Muvaffaqiyat! Hisobingiz yaratildi";
      console.log(userCred);
      window.location.reload();
    ,
  ,
;
</script>

【参考方案1】：

在您的密码字段中，您正在单独使用 v-bind：

<!-- Password -->
    <div class="mb-3">
      <label class="inline-block mb-2">Parol</label>
        <vee-field
          name="password"
          type="password"
          class="
            block
            w-full
            py-1.5
            px-3
            text-gray-800
            border border-gray-300
            transition
            duration-500
            focus:outline-none focus:border-black
            rounded
          "
          placeholder="Parol"
          v-bind="field"   <------------- here
        />
      <ErrorMessage class="text-red-600" name="password" />
    </div>

v-bind 用于将 html 属性绑定到 javascript 表达式，而您根本没有提供任何 HTML 属性。

Vue 正在尝试查找您的组件中的字段，而我可以看到，您还没有定义它。这就是您收到警告的原因，只需删除v-bind="field"，警告就会消失。