javascript - 属性未在实例上定义并在渲染期间引用。修复问题

Question

这个问题已经有答案了:

[Vue warn]: Property or method is not defined on the instance but referenced during render (28 个回答)

已关闭 3 年前。

VUEJS 给我以下错误:

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.

发现于

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

当我使用提供器和注入(inject)器时，我在祖 parent 组件中有代码:

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。修复这些拼写错误，应该可以解决问题。