Help us understand the problem. What is going on with this article?

Vue.jsで動的にモーダルウィンドウを表示する

More than 3 years have passed since last update.

モーダルウィンドウを動的に表示するVue.jsコンポーネントのサンプルです。

ソース:https://github.com/asaokamei/vue2-dynamic-modal

  • モーダルウィンドウのサンプルコードは、例えばVue.jsのオフィシャルサイトにもたくさんあります。ただモーダルの中身が固定されているものが多いです。(例:index.html
  • 一方、クリックするボタンによりモーダルの中身が変えようとすると面倒になります。(例:tasks.html

動的なモーダルウィンドウの例

動的なモーダルウィンドウの例です。

dynamic-modal.gif

クリックするタスクによって、モーダルの中身が違うのがわかると思います。

コードの説明

tasks.jsの中を簡単に説明してみます。このJSでは、メインの$appmodalコンポーネントがあります。そして、もうひとつ、Hubというイベントハブ用のVueオブジェクトを導入しています。

var Hub = new Vue();

Vue.component(
    'modal', {
        template: '#modal-template',
        data: function() {
            /* いろいろ設定 */
        },
        methods: {
            open: function (task) {/* コード省略 */},
            close: function () {/* コード省略 */}
        },        
        mounted: function() {
            this.$nextTick(function () {
                Hub.$on('open-modal', this.open);
                Hub.$on('close-modal', this.close);
            }.bind(this));
        }
    });

new Vue({
    el: '#app',
    methods: {
        openModal: function (task) {
            Hub.$emit('open-modal', task);
        },
        closeModal: function () {
            Hub.$emit('close-modal');
        }
    }
});

modalコンポーネントを初期化するときに、open-modalclose-modalというイベントをHubに登録しています。

メインのappコンポーネントでは、例えばopenModalから、先のopen-modalイベントを呼び出せば、後はmodalがよしなに処理してくれます。

HTMLファイル側

モーダルを呼び出すHTML側のJavaScriptも簡単に見てみます。

<ul>
    <li v-for="task in tasks">
        {{ task.id }}: {{ task.name }}
        <button @click="openModal(task)" @keyup.esc="closeModal()">more</button>
    </li>
</ul>

ボタンをクリックするとopenModal(task)が呼び出され、一緒にモーダルに表示するtaskも一緒に渡してます。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away