Question

在vue 2中使用bootstrap 4（无bootstrap-vue）。索引文件中引用了Popper.js和jquery以及bootstrap.js

最初试图让bootstrap模式在单个组件中工作，但由于它没有成功，我想我也可能将它们拆分为此时将模态与导航栏分开。

所以这是我的navbar.vue

  <template>
  <nav class="navbar">
        <div class="container">
          <router-link class="navbar-brand" to="#">
            <img src="../assets/img/logo.png" width="40" height="40" class="d-inline-block align-top" alt="">
          </router-link>
          <ul class="nav justify-content-end">
            <li class="nav-item">
              <img src="../assets/img/user_logo.png">
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="#">Username</router-link>
            </li>

            <!-- Modal -->
            <div class="modal fade" id="loginPop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <!--Content-->
                    <div class="modal-content form-elegant">

                    </div>
                    <!--/.Content-->
                </div>
            </div>
            <!-- Modal -->

            <!--li class="nav-item"-->
              <div class="text-center">
                  <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#loginPop" @click="popModal">Login</a>
              </div>
            <!--/li-->

                  </ul>
        </div>
      </nav>
</template>
<script>
import login from './login.vue'

export default {
  data: {
    'modal': '#loginPop'
  },
  methods: {
      popModal(event) {
        event.preventDefault()
        $(this.modal).modal('show')
      }
  }
}
</script>

必须初始化登录/注册模式的登录按钮只刷新页面，添加了preventDefault（）希望它可以解决问题，但此时它什么都不做。

这是我的login.vue（只是我抓过的模板） .wrapper与模态无关，只是创建一个根元素。

<template>
  <!--Content-->
  <div class="wrapper">
      <!--Header-->
    <div class="modal-header text-center">
        <h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel"><strong>Sign in</strong></h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <!--Body-->
    <div class="modal-body mx-4">
        <!--Body-->
        <div class="md-form mb-5">
            <input type="email" id="Form-email1" class="form-control validate">
            <label data-error="wrong" data-success="right" for="Form-email1">Your email</label>
        </div>

        <div class="md-form pb-3">
            <input type="password" id="Form-pass1" class="form-control validate">
            <label data-error="wrong" data-success="right" for="Form-pass1">Your password</label>
            <p class="font-small blue-text d-flex justify-content-end">Forgot <a href="#" class="blue-text ml-1"> Password?</a></p>
        </div>

        <div class="text-center mb-3">
            <button type="button" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Sign in</button>
        </div>
        <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in with:</p>

            <div class="row my-3 d-flex justify-content-center">
                <!--Facebook-->
                <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fa fa-facebook text-center"></i></button>
                <!--Twitter-->
                <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fa fa-twitter"></i></button>
                <!--Google +-->
                <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fa fa-google-plus"></i></button>
            </div>
    </div>
    <!--Footer-->
    <div class="modal-footer mx-5 pt-3 mb-1">
        <p class="font-small grey-text d-flex justify-content-end">Not a member? <a href="#" class="blue-text ml-1"> Sign Up</a></p>
    </div>
  </div>
  <!--/.Content-->
</template>

过去一小时左右，我一直在与这种模式搏斗。

任何帮助将不胜感激。

如果我可以更新问题，请告诉我

Vue 2中的Bootstrap 4模态 - 不起作用

0 个答案: