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

我猜当我试图调用

this.$bvModal.show（“SigninModel”）

要显示我的模式，我收到以下错误：

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>

发表
const{fb，db}=require（'../../fireconfig.js'）
导出默认值{
名称：“AddPost”，
数据：函数（）{
返回{
标题：“”，
正文：“”，
莫达尔肖：没错，
电子邮件：“”，
密码：“”
}      
},
安装的（）{
此.$bvModal.show（“SigningModel”）
},
方法：{
签名用户：功能（e）{
e、 预防默认值（）
fb.auth（）
.signInWithEmailAndPassword（this.email，this.password）
.catch（函数（错误）{
//在这里处理错误。
var errorCode=error.code；
var errorMessage=error.message；
如果（错误代码==='auth/错误密码'| |错误代码==='auth/无效电子邮件'）{
警报（“密码或电子邮件不正确”、错误代码、错误消息）；
此.bvModal.show（“SignInModel”）/--------------此处抛出错误
}否则{
console.log（'user successfully authenticated'）
}
});
},
addpost（事件）{
event.preventDefault（）
试一试{
让数据={
标题：这个，
身体：这个
}
db.collection（'articles'）.doc（this.title）.set（数据）
console.log（'上传数据到数据库'）
}捕捉（错误）{
console.log（'发生错误'，err）
}
},
} 
}

将您的函数设置为

捕获中的箭头函数，它将使用vue组件引用
此

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')

            }
    });
  },

谢谢这样做很好，我能问一下为什么这样做吗？我以为arrow函数中的任何东西都是自己的作用域？@monsterpiece arrow函数不绑定自己的作用域。它将从父级使用，在本例中为Vue组件。