Question

我对Vue比较陌生，当我尝试在我的Vue项目中使此重置电子邮件模式工作时，我非常迷惑此错误消息：

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

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

ForgotPassword.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组件的文件，

Login.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直接移到该组件上。我相信这可能会解决您的问题。

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

1 个答案: