Vue bootstrap <b-modal> not firing function @click event

Question

I don't want to go into trying to pass props to the <b-modal> buttons so I just want to call signinUser() @click in my modal when I click the default OK button but my modal doesn't seem to fire on this.

The signinUser() will fire on @hidden though.

I'm also trying to prevent the modal from dismissing unless a user is authenticated (which is why I don't want it firing on @hidden)

Can someone point me in the right direction?

Here's my component where I am authenticating with firebase:

<template>
  <div class="container">
    <b-modal id="signinModal" @click="signinUser($event)" v-model="modalShow" :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: ''
    }
  },
  methods: {
    signinUser(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);
            //do nothing an modal stays up
          } else {
            console.log('user successfully authenticated')
            this.modalShow = false
          }
        });
    },
  }
}
</script>

When do you actually want the @click event to fire? When you open the modal? When you click the OK button? When you modal closes? — Hiws
– Hiws, Commented May 30, 2020 at 20:26

Hans Felix Ramos · Accepted Answer · 2020-05-30 21:15:13Z

3

use @ok instead of @click:

<b-modal id="signinModal" @ok="signinUser($event)" v-model="modalShow" :no-close-on-backdrop="true">
  <!-- more code -->
</b-modal>

answered May 30, 2020 at 21:15

Hans Felix Ramos

4,4443 gold badges19 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

monsterpiece Over a year ago

Neat, didn’t know bootstrap vue had these triggers. I’m assuming the cancel call is just @cancel then ?

Hans Felix Ramos Over a year ago

yep, for cancel use @hidden

Collectives™ on Stack Overflow

Vue bootstrap <b-modal> not firing function @click event

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related