Javascript 属性未在实例上定义，并在渲染期间引用。解决问题

VUEJS向我提供以下错误：

vue.runtime.esm.js？2b0e:619[vue warn]：属性或方法“singupCollection”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。请参阅：

发现于

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

位于src/view/headerfroms/Signup.vue
在src/view/LandingRest.vue处
位于src/components/LandingPage.vue
位于src/components/AppLayout.vue
在src/App.vue

我的代码是：

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

消磨时间
全名
电子邮件
日期
性别
位置
密码
注册
导出默认值{
日期（{
返回{
信息：“
};
},
注入：[“注册集合”]，
方法：{
splitDOB（）{
const dob=this.dob；
常量[月、日、年]=拆分日期（“/”）；
this.signupCollection.month=月份；
this.signupCollection.day=天；
this.signupCollection.year=年；
},
注册（）{
这是splitDOB（）；
}
},
创建（）{
console.log（this.signupCollection）；
}
};

当我使用“提供”和“喷油器”时，我的祖父母组件中有代码：

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

导出默认值{
组成部分：{
应用布局：应用布局
},
数据：函数（）{
返回{
签名a：{
姓名：“，
emal:“，
密码：“”，
性别：“，
地点：“，
日期：“，
月份：“，
年份：“”
}
};
},
提供（）{
返回{
signupCollection:this.signUpdatea
};
}
};

您的模板中有几个输入错误。在脚本中，您提供了

signupCollection

，但在模板中，您在多个位置引用了

singupCollection

。修复这些输入错误，应该可以解决问题。

模板中有几个输入错误。在脚本中，您提供了

signupCollection

，但在模板中，您在多个位置引用了

singupCollection

。修复这些打字错误，应该可以解决问题。

这是否回答了您的问题？这回答了你的问题吗？