Property or method "sendResetMail" is not defined on the instance but referenced during render

Question

I'm relatively new to Vue and super stuck with this error message when I try to make this reset email modal work in my Vue project:

Property or method "sendResetMail" 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.

I have no idea what I need to do to make this work. I followed the Vue documentation and declared resetEmail in the data option.

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>

This is the file where I use the ForgotPassword.vue component,

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>

I would be very grateful if someone can explain to me what I'm missing :)

Answer 1

You are referencing

<form @submit.prevent="sendResetMail">

inside your ModalForm component.

The problem is that this template is going to look for the method sendResetMail on that ModalForm component template when it gets rendered since you the code is referencing it. However this sendResetMail method is not directly associated on that.

You can consider using a mix-in if you need to use the sendResetMail in many places , or maybe just move that method directly to the same component "ModalForm" that is referencing it.

You can also look into for example eventBus to trigger the method by emitting an event.

The simplest option if you only need to call it from the MOdalForm component is to just move the sendResetMail direcly to that component. I believe that would probably fix your issue.