Свойство или метод «sendResetMail» не определен в экземпляре, но на него ссылаются во время рендеринга

Question

Я относительно новичок в Vue и очень застрял с этим сообщением об ошибке, когда я пытаюсь заставить эту модальную почту сброса работать в моем проекте Vue:

Свойство или метод "sendResetMail" не определенна экземпляр, но на который ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Я понятия не имею, что мне нужно сделать, чтобы это работало.Я следовал документации Vue и объявил 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.

Проблема в том, что этот шаблон будет искать метод sendResetMail в этом шаблоне компонента ModalForm, когда он будет визуализирован, так как код ссылается на него.Однако этот метод sendResetMail не связан напрямую с этим.

Вы можете рассмотреть возможность использования встраивания, если вам нужно использовать sendResetMail во многих местах, или, возможно, просто переместить этот метод непосредственно в тот же компонент "ModalForm", который ссылается на него.

Вы также можете посмотреть, например, на eventBus, чтобы вызвать метод, отправив событие.

Самый простой вариант, если вам нужно только вызвать его из компонента MOdalForm, это просто переместить sendResetMail непосредственно в этот компонент.Я считаю, что это, вероятно, решит вашу проблему.