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

Viewed 1286

I'm guessing this isn't scoped properly in my function, when I try to call this.$bvModal.show("signinModal") to show my modal I get this error:

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

I know that $bvModal should be scoped to the component and I'm not using any arrow functions so I don't see where my issue is coming from, is there a way to get around this in vue that I'm missing?

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

1 Answers

Make your function to an arrow functions in your catch, it will reference this with the vue component.

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

            }
    });
  },
Related