Vue框架搭配Bootstrap modal

前言

遇到的問題

方法1 — jQuery

Bootstrap modal

方法二- 讓頁面重新整理

window.setTimeout(function(){location.reload()},3000)

方法三- 利用v-if來綁定modal

//綁在component
//SignIn.vue
<template>
<div v-if="true/false"
class="modal fade" id="signin" tabindex="-1" role="dialog" aria-labelledby="signinLabel" aria-hidden="true"
>
...
<div class="modal-content" ...>
<form @submit.prevent.stop="handleSubmit">
...
<button type="submit"> Submit </button>
</form>
</div>
</template>
//或是綁在父層
//App.vue
<template>
<div id="app">
...
<SignInM v-if="true/false" />
...
<main role="main" class="mt-5">
<router-view />
</main>
</div>
</template>
//打開瀏覽器頁面用開發者工具會發現還是會留下backdrop這個元素<html>
...
<div class="modal fade" id="signin" ...>
...
<div class="modal-content" ...>
<form @submit.prevent.stop="handleSubmit">
...
<button type="submit"> Submit </button>
</form>
</div>
...
<div class="modal-backdrop fade show"></div>
</body>
</html>

其他方法-BootstrapVue and others

1992, 學習科技|研究投資|環境工程技師|成功大學環境工程學系|台灣大學環境工程研究所|水處理行業工作兩年半|想要用科技打造自己的企業,過自己想過的生活。

1992, 學習科技|研究投資|環境工程技師|成功大學環境工程學系|台灣大學環境工程研究所|水處理行業工作兩年半|想要用科技打造自己的企業,過自己想過的生活。