未捕获的类型错误：无法读取未定义 vue 的属性“$bvModal”

Question

当我尝试调用时，我猜 this 在我的函数中的范围不正确 this.$bvModal.show("signinModal") 显示我的模态我收到此错误：

Uncaught TypeError: Cannot read property '$bvModal' of undefined

我知道$bvModal 应该限定为组件，并且我没有使用任何箭头函数，所以我看不到我的问题来自哪里，有没有办法在 vue 中解决这个问题？我失踪了？

<template>
  <div class="container">

    <b-modal id="signinModal" @hidden="signinUser($event)" :no-close-on-backdrop="true">
      <input id="email" v-model="email" placeholder="email">
      <input id="pass" v-model="password" placeholder="password">
    </b-modal>

    <form v-on:submit.prevent class="cube" v-if="modalShow == false">
       <div>
         <input id="title" v-model="title" placeholder="title">
       </div>

       <div>
         <textarea id="body" v-model="body" placeholder="body"></textarea>
       </div>

       <div>
         <b-button id ="postbtn" @click="addpost($event)" variant="outline-success">Publish</b-button>
       </div>    
    </form>
  </div>
</template>

<script>
const {fb,db} = require('../../fireconfig.js')

export default {
  name: 'AddPost',
  data:function(){   
    return{
        title: '',
        body: '',
        modalShow: true,
        email: '',
        password: ''
    }      
  },
  mounted(){
    this.$bvModal.show("signinModal")
  },

  methods:{
    signinUser:function(e){
      e.preventDefault()
      fb.auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .catch(function(error) {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;

          if (errorCode === 'auth/wrong-password' || errorCode === 'auth/invalid-email') {
            alert('password or email incorrect',errorCode,errorMessage);
            this.$bvModal.show("signinModal") //---------------ERROR THROWN HERE

         } else {
            console.log('user successfully authenticated')
         }
      });
    },

    addpost(event){   
      event.preventDefault()
      try {
        let data = {
           title: this.title,
           body: this.body
        }

        db.collection('articles').doc(this.title).set(data)
        console.log('uploaded data to db')
      } catch(err) {
        console.log('there was an error',err)
      }
    },
  } 
}
</script>

Answer 1

在你的catch 中将你的函数变成一个箭头函数，它会在vue 组件中引用this。

signinUser:function(e){
    e.preventDefault()
   fb.auth().signInWithEmailAndPassword(this.email, this.password)
          .catch( error => {
              // Handle Errors here.
              var errorCode = error.code;
              var errorMessage = error.message;

        if (errorCode === 'auth/wrong-password' || errorCode === 'auth/invalid-email') {
              alert('password or email incorrect',errorCode,errorMessage);
              this.$bvModal.show("signinModal") //---------------ERROR THROWN HERE

            } else {
              console.log('user successfully authenticated')

            }
    });
  },