属性或方法“sendResetMail”未在实例上定义，但在渲染期间引用

Question

我对 Vue 比较陌生，当我尝试在我的 Vue 项目中使用此重置电子邮件模式时，我超级卡住了这个错误消息：

属性或方法“sendResetMail”未在实例上定义，但 在渲染期间引用。确保此属性是反应性的， 无论是在数据选项中，还是对于基于类的组件，通过 初始化属性。

我不知道我需要做什么才能完成这项工作。我遵循了 Vue 文档并在 data 选项中声明了 resetEmail。

忘记密码.vue：

    <template>
        <section>
            <a @click="isComponentModalActive = true">
                Forgot Password?
            </a>

            <b-modal :active.sync="isComponentModalActive" has-modal-card>
                <modal-form v-bind="resetEmail"></modal-form>
            </b-modal>
        </section>
    </template>

    <script>
    import firebase from 'firebase/app'
    import 'firebase/auth'
    import 'firebase/firestore'

    const ModalForm = {
      props: ['resetEmail'],
      template: `
                <form @submit.prevent="sendResetMail">
                    <div class="modal-card" style="width: auto">
                        <header class="modal-card-head">
                            <p class="modal-card-title">Forgot password?</p>
                        </header>
                        <section class="modal-card-body">
                            <b-field label="Email">
                                <b-input
                                    type="email"
                                    :value="resetEmail"
                                    placeholder="Your email"
                                    required>
                                </b-input>
                            </b-field>

                        </section>
                        <footer class="modal-card-foot">
                            <button class="button" type="button" @click="$parent.close()">Close</button>
                            <button class="button is-primary">Reset</button>
                        </footer>
                    </div>
                </form>
            `
    }

    export default {
      components: {
        ModalForm
      },
      data () {
        return {
          isComponentModalActive: false,
          resetEmail: '',
          feedback: null
        }
      },
      methods: {
        sendResetMail () {
          var auth = firebase.auth()
          var emailAddress = this.resetEmail

          auth.sendPasswordResetEmail(emailAddress).then(function () {
            // Email sent.
            console.log('email send')
          }).catch(function (error) {
            // An error happened.
            this.feedback = error.message
            console.log(error.message)
          })
        }
      }
    }
    </script>

这是我使用 ForgotPassword.vue 组件的文件，

登录.vue：

<template>
  <section class="section">
    <div class="container">
      <div class="columns">
        <div class="column"></div>
        <div class="column is-half">
          <div class="box">
            <h1 class="title">Login</h1>
            <form @submit.prevent="login">
              <b-field label="Email" :message="feedback" :type="type">
                <b-input placeholder="Email" icon="email" type="email" v-model="email">
                </b-input>
              </b-field>
              <b-field label="Password" :message="feedback" :type="type">
                <b-input placeholder="Password" type="password" icon="textbox-password" password-reveal v-model="password">
                </b-input>
              </b-field>
              <button type="submit" class="button is-primary is-fullwidth">Login</button>
              <div class="field">
                <div class="control">
                  <p class="control has-text-centered">
                    <ForgotPassword/>
                  </p>
                </div>
              </div>
              <div class="field">
                <div class="control">
                  <p class="control has-text-centered">
                    Don't have an account?
                    <a href="/register">
                      <router-link :to="{ name: 'Signup' }">
                        Signup
                      </router-link>
                    </a>
                  </p>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="column"></div>
      </div>
    </div>
  </section>
</template>

<script>
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import ForgotPassword from '@/components/auth/ForgotPassword'

export default {
  name: 'login',
  metaInfo: {
    // specify a metaInfo.title, this title will be used
    title: 'Login',
    // all titles will be injected into this template
    titleTemplate: '%s | Wterdrops.com'
  },
  components: {
    ForgotPassword
  },
  data () {
    return {
      email: null,
      password: null,
      feedback: null,
      type: null
    }
  },
  methods: {
    login () {
      if (this.email && this.password) {
        firebase
          .auth()
          .signInWithEmailAndPassword(this.email, this.password)
          .then(cred => {
            this.$router.push({
              name: 'Dashboard'
            })
          })
          .catch(err => {
            this.feedback = err.message
          })
        this.feedback = null
      } else {
        this.feedback = 'Please fill in both fields.'
        this.type = 'is-danger'
      }
    }
  }
}
</script>

<style>
.login {
  max-width: 400px;
  margin-top: 60px;
}
</style>

如果有人能向我解释我缺少什么，我将不胜感激:)

Answer 1

你在引用

<form @submit.prevent="sendResetMail">

在您的 ModalForm 组件中。

问题是这个模板在渲染时会在那个 ModalForm 组件模板上寻找方法 sendResetMail ，因为你的代码正在引用它。但是，此 sendResetMail 方法与此没有直接关联。

如果您需要在许多地方使用 sendResetMail，您可以考虑使用混合，或者直接将该方法移动到引用它的同一个组件“ModalForm”。

您还可以查看例如 eventBus 通过发出事件来触发该方法。

如果您只需要从 MOdalForm 组件调用它，最简单的选择是将 sendResetMail 直接移动到该组件。我相信这可能会解决您的问题。