The VUEJS is giving me the following error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "singupCollection" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
<Signup> at src/view/headerfroms/Signup.vue
<LandingRest> at src/view/LandingRest.vue
<LandingPage> at src/components/LandingPage.vue
<AppLayout> at src/components/AppLayout.vue
<App> at src/App.vue
<Root>
AND MY CODE IS:
<template>
<div class="signup">
<div class="signup__inner">
<form class="signup__form" @submit="signup">
<div class="signup--logo">
<span class="highlight">KILL</span>TIME
</div>
<div class="signup__form__attr">
<label class="signup__form__attr--label">FULL NAME</label>
<input class="signup__form__attr--input" type="text" v-model="this.singupCollection.name" />
</div>
<div class="signup__form__attr">
<label class="signup__form__attr--label">EMAIL</label>
<input
class="signup__form__attr--input"
type="email"
v-model="this.singupCollection.email"
/>
</div>
<div class="signup__form__attr">
<label class="signup__form__attr--label">DATE</label>
<input class="signup__form__attr--input" type="date" v-model="this.singupCollection.dob" />
</div>
<!-- <div class="signup__form__attr">
<div class="signup__form__multi">
<div class="signup__form__multi__attr" style="flex: 1; flex-grow: 1;">
<label class="signup__form__attr--label">DOB</label>
<input class="signup__form__attr--input" type="date" />
</div>
<div class="signup__form__multi__attr" style="flex: 1; flex-grow: 1;">
<input id="select-profile" class="signup__form__attr--input-file" type="file" />
<label for="select-profile" class="signup__form__attr--label-file">
<span>
<img src="../../assets/photo.svg" />
</span>
<span>Profile Photo</span>
</label>
</div>
</div>
</div>-->
<div class="signup__form__attr">
<div class="signup__form__multi">
<div class="signup__form__multi__attr">
<label class="signup__form__attr--label">GENDER</label>
<input
class="signup__form__attr--input"
type="text"
v-model="this.singupCollection.gender"
/>
</div>
<div class="signup__form__multi__attr">
<label class="signup__form__attr--label">LOCATION</label>
<input
class="signup__form__attr--input"
type="text"
v-model="this.singupCollection.location"
/>
</div>
</div>
</div>
<div class="signup__form__attr">
<label class="signup__form__attr--label">PASSWORD</label>
<input
class="signup__form__attr--input"
type="password"
v-model="this.singupCollection.password"
/>
</div>
<div class="signup__form__attr">
<button class="signup__form__attr--submit">SIGN UP</button>
</div>
</form>
</div>
</div>
</template>
<script>
export default {
date() {
return {
message: ""
};
},
inject: ["signupCollection"],
methods: {
splitDOB() {
const dob = this.dob;
const [month, day, year] = dob.split("/");
this.signupCollection.month = month;
this.signupCollection.day = day;
this.signupCollection.year = year;
},
signup() {
this.splitDOB();
}
},
created() {
console.log(this.signupCollection);
}
};
</script>
As i am using the provide and injectors I have code in the grandparent component:
export default {
components: {
appLayout: AppLayout
},
data: function() {
return {
signupData: {
name: "",
emal: "",
password: "",
gender: "",
location: "",
day: "",
month: "",
year: ""
}
};
},
provide() {
return {
signupCollection: this.signupData
};
}
};
</script>
