スリ飯屋MaLankaのフリーエンジニアな日々

このブログでは、フリーランス5期目となる自身の実体験から、フリーランスエンジニアになるためのノウハウ、ブログや沖縄移住、スリランカの最新情報について発信します。

【Vue.js BootstrapVue】methodsでmodalをopen、closeする

※記事内に提携先企業のアフィリエイト広告(リンク、バナー等)、Google広告を含む場合があります

【Vue.js BootstrapVue】methodsでmodalをopen、closeする


こんにちは、現役沖縄フリーランスエンジニアの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.jsTypeScriptReact.jsを学習するなら、Udemyの下記のコースがおすすめ★

(自分も全て受講しました)


  • Vue.js

Vue.js + Firebaseで作るシングルページアプリケーション


  • TypeScriipt

ハンズオンで学ぶ TypeScript - JavaScript エンジニアのための TypeScript徹底入門


  • React.js

フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門




最後に


下記の表に、

フリーランスエンジニア向けの人気エージェントをまとめてみました。


エージェント選びで悩んでいる方は是非参考にしてみてくださいね★





あわせて読みたい


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech