我猜测this
在尝试调用时在我的函数中作用域不正确this.$bvModal.show("signinModal")
显示我的模态,我得到这个错误:
Uncaught TypeError: Cannot read property '$bvModal' of undefined
我知道$bvModal
应该在组件范围内,并且我没有使用任何箭头功能,所以我看不到问题的出处,有没有办法解决这个问题呢?失踪了吗?
<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>
将您的功能变为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')
}
});
},