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

Posted 2023-02-23

【中文标题】属性或方法“sendResetMail”未在实例上定义，但在渲染期间引用

【英文标题】：Property or method "sendResetMail" is not defined on the instance but referenced during render

【发布时间】：2019-02-28 06:16:58

【问题描述】：

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

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

【参考方案1】：

你在引用

<form @submit.prevent="sendResetMail">

在您的 ModalForm 组件中。

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

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

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

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

【讨论】：

感谢您的回答！现在我明白为什么它不起作用了。我还通过将模板从 ForgotPassword 组件内的 ModalFrom 组件移动来使其工作。但我也想试试你的最后一个建议。所以最后一个菜鸟问题。如何在 ModalForm 组件中移动 sendResetMail 方法？我还没有看到有人这样做，也找不到一个很好的例子。抱歉，我对框架还是很陌生。