时间戳

首页 > 解决方案 > 如何使用引导程序在 VueJS 中打开模式？

laravel - 如何使用引导程序在 VueJS 中打开模式？

问题描述

我正在尝试使用 boostrap 在我的 Vue 模板中打开一个模式。但是每当我尝试在其上使用 jquery 时，模态都不会出现。

这是我的代码：

<template>
  <div id="app_religion">
    <!-- Button trigger modal -->
    <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open</button> -->
    <button type="button" class="btn btn-primary"  @click="showModal()">
      Open
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            test
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

export default {
    methods: {
        showModal() {
          console.log("test")
          $('#exampleModal').modal('show');
        },
    },
}
</script>

我在使用 Vue 方面真的很新，谁能指导我如何解决我的问题。我真的很想弄清楚。

标签： laravelvue.js

解决方案

这可以通过纯js​​轻松实现

首先为您的模态分配一个唯一的 id

<div class="modal fade" id="uniqueId" tabindex="-1" role="dialog" aria-labelledby="uniqueIdlLabel" aria-hidden="true">

从引导程序导入模态

import { Modal } from "bootstrap";

声明一个变量，它将作为您的模态代理，声明uniqueModal如下，将变量分配给由 检索到的 DOM 元素uniqueId，使用引导程序提供的内置函数来操作模态。文档

export default {
    name:"randomName",
     data(){
     return {uniqueModal:null}
    },
    methods:
    {
     showUniqueModal() {
      this.uniqueModal = new Modal(document.getElementById("uniqueId"),{ keyboard: false });
      this.uniqueModal.show();
      },
     closeUniqueModal() {
      this.uniqueModal.hide();
     },
    },

}

推荐阅读