vue bootstrap b-modal not fire function @click

问题描述 投票:1回答:1

我不想尝试将道具传递给<b-modal>按钮,所以当我单击默认的OK按钮时,我只想在模态中调用signinUser() @click,但模态似乎不对此射击?

尽管signinUser()将在@hidden上触发

我还试图阻止模式消失,除非对用户进行身份验证(这就是为什么我不希望它在@hidden上触发)

有人可以指出正确的方向吗?

这是我要通过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>
javascript vue.js bootstrap-vue
1个回答
0
投票

使用@ok代替@click

<b-modal id="signinModal" @ok="signinUser($event)" v-model="modalShow" :no-close-on-backdrop="true">
  <!-- more code -->
</b-modal>
© www.soinside.com 2019 - 2024. All rights reserved.