我正在使用 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>uj5u.com熱心網友回復：
在您的密碼欄位中，您單獨使用 v-bind：
<!-- Password -->
<div >
<label >Parol</label>
<vee-field
name="password"
type="password"
placeholder="Parol"
v-bind="field" <------------- here
/>
<ErrorMessage name="password" />
</div>
v-bind 用于將 HTML 屬性系結到 JavaScript 運算式，而您根本沒有提供任何 HTML 屬性。
Vue 正在嘗試查找您的組件中的哪個欄位，正如我所見，您尚未定義它。這就是為什么您會收到警告，只需洗掉v-bind="field"警告就會消失。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/359405.html