属性未在实例上定义，并且在渲染过程中被引用.修复问题

Question

VUEJS给我以下错误：

vue.runtime.esm.js？2b0e:619[Vue warn]：属性或方法"；singupCollection"；未在实例上定义，但在渲染过程中被引用。通过初始化该属性，确保该属性在数据选项中是被动的，或者对于基于类的组件是被动的。请参阅：https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-反应特性。

在中找到

<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>

我的代码是：

<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>

当我使用provide和注入器时，我在祖父母组件中有代码：

export default {
components: {
appLayout: AppLayout
},
data: function() {
return {
signupData: {
name: "",
emal: "",
password: "",
gender: "",
location: "",
day: "",
month: "",
year: ""
}
};
},
provide() {
return {
signupCollection: this.signupData
};
}
};
</script>

Answer 1

您的模板中有几个拼写错误。在脚本中，您提供了signupCollection，但在模板中，您在多个位置引用了singupCollection。修复这些拼写错误，它应该可以解决问题。