[英]Vue bootstrap <b-modal> not firing function @click event
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.我不想 go 试图将道具传递给
<b-modal>
按钮,所以我只想在单击默认确定按钮时在我的模式中调用signinUser()
@click
但我的模式似乎没有触发对此。
The signinUser()
will fire on @hidden
though.不过,
signinUser()
将在@hidden
上触发。
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
)我还试图防止模式关闭,除非用户经过身份验证(这就是为什么我不希望它在
@hidden
上触发)
Can someone point me in the right direction?有人可以指出我正确的方向吗?
Here's my component where I am authenticating with firebase:这是我使用 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>
use @ok
instead of @click
:使用
@ok
而不是@click
:
<b-modal id="signinModal" @ok="signinUser($event)" v-model="modalShow" :no-close-on-backdrop="true">
<!-- more code -->
</b-modal>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.