I was using vee-validate, and firebase and it keeps throwing this error.
it seems like it is cursing at the validation schema, and it being not declared upon instance, however it really is defined.
I have read multiples threads on this and this happens with v-models, and not defining properties and binding, so forth. in my situation, I cannot figure out what seems to be the problem.
I have updated the repo as well in case if it may be of some help too 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>CodePudding user response：
In your password field you are using v-bind by itself:
<!-- Password -->
<div >
<label >Parol</label>
<vee-field
name="password"
type="password"
placeholder="Parol"
v-bind="field" <------------- here
/>
<ErrorMessage name="password" />
</div>
v-bind is used to bind an HTML attribute to a JavaScript expression and you didn't supply any HTML attribute at all.
Vue is trying to find what field is in your component and as I can see, you haven't defined it. That is why you are getting the warning, just remove the v-bind="field" and the warning should disappear.