It seems like this isn't scoped properly within my function. When attempting to call
this.$bvModal.show("signinModal")Uncaught TypeError: Cannot read property '$bvModal' of undefined
I understand that $bvModal should be scoped to the component and I'm not using any arrow functions, so I'm unsure where the problem lies. Is there a Vue-specific way to resolve this issue that I am overlooking?
<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>