こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。
このブログでは、
僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、
ノウハウなどを書いていきます。
今回は、
- 【Vue.js BootstrapVue】methodsでmodalをopen、closeする
について書いていきます。
【Vue.js BootstrapVue】methodsでmodalをopen、closeする
やり方
- 開く
this.$bvModal.hide(modalのid)
- 閉じる
this.$bvModal.show(modalのid)
1、modalを開くボタンと、開閉したいmodalを作成
// some_component.vue
<template>
<div>
// ボタン
<b-button pill v-b-modal.sample-modal variant="primary">ログイン</b-button>
// 開閉したいmodal
<b-modal id="sample-modal" title="ログイン">
// modalの中身
</b-modal>
</div>
</template>
2、引数で指定したidを持つmodalを開く、もしくは閉じる
// some_component.vue
<script>
export default {
methods: {
openModal: function {
// 開く
this.$bvModal.show('sample-modal')
},
closeModal: function {
// 閉じる
this.$bvModal.hide('sample-modal')
}
}
}
</script>
以上です。
Vue.jsや流行りのTypeScriptを学びたい人へ
Vue.js
、TypeScript
、React.js
を学習するなら、Udemyの下記のコースがおすすめ★
（自分も全て受講しました）
- Vue.js
✅Vue.js + Firebaseで作るシングルページアプリケーション
- TypeScriipt
✅ハンズオンで学ぶ TypeScript - JavaScript エンジニアのための TypeScript徹底入門
- React.js
✅フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
