我如何打开一个模态在VueJS使用引导?

Question

我试图在我的Vue模板中使用boostrap打开一个模态。但每当我尝试使用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真的很新，谁能指导我如何解决我的问题。我实在想不明白这是怎么回事。

Answer 1

这可以通过纯js轻松实现

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

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

import Modal from bootstrap

import { Modal } from "bootstrap";

声明一个变量，作为你的模态的代理，下面声明为uniqueModal，为变量分配由uniqueId检索到的DOM元素，使用bootstrap提供的内置函数来操作模态。文档

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();
},
},
}

Answer 2

明明可以用vue做，为什么还要用jQuery呢?

在语气中使用v-if或v-show(检查两者之间的差异，选择更符合你想要的结果的那个)

https://v2.vuejs.org/v2/guide/conditional.html

没有测试它，我在飞行中写了它，但是像这样的东西应该可以工作。

<template>
<div>
<button type="button" class="btn btn-primary"  @click="showModal">
Open
</button>
<div class="modal" v-if="modalOpen">
<p>Hello World</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
modalOpen: false
}
},

methods: {
showModal() {
this.modalOpen = true;
}
}
}
</script>