Vue bootstrap <b-modal> not firing function @click event
Answer a 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 s
·
Answer a 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>
Answers
use @ok
instead of @click
:
<b-modal id="signinModal" @ok="signinUser($event)" v-model="modalShow" :no-close-on-backdrop="true">
<!-- more code -->
</b-modal>
更多推荐
已为社区贡献21234条内容
所有评论(0)