Vue.jsでモーダルを閉じる動きの実装($.emit)

Question

１. emitが効かない
vue-masonryを使用して画像を並べ、そこにモーダル部分をVue.jsのコンポーネントで作成し、クリック時にモーダルが開く機能の実装を目指しています。
開く部分やモーダル内表示は実装できたのですが、モーダル内の「close」ボタンでモーダルを閉じても効きません。当該部分はemitを用いています。

    <div v-masonry-tile class="item" v-for="(item,index) in filteredItems" v-bind:key="item.id" v-on:click="openModal(index)">
      <div v-on:mouseleave="!isMobile ? hideOverlay() : null" v-on:mouseover="!isMobile ? showOverlay(index) : null" >
        <img :src="item.src" :alt="item.altTxt"/>
        <p class="photo__overlay" v-show="hoverFlag && index === hoverIndex "</p>
      </div>
      <modal v-show="modalFlg && index === modalIndex" v-on:close="closeModal" v-bind:modal-id="index" v-bind:modal-data="modalItems"/>
        </div>
    </div>

let app = new Vue({
  el: '#app',
  data: {
    isMobile : false,
    hoverFlag: false,
    hoverIndex: null,
    modalFlg:false,
    modalIndex: null,
    modalItems: []
  },
  components:{
    'modal':{
      template : `
        <div class="gallery__overlay">
          <div class="gallery__modal modal">
            <p>これがモーダルウィンドウです。</p>
            <p v-for="(item,index) in ModalData" v-bind:key="item.id" v-if="currentSlide == index">
              <img :src="item.src" :alt="item.altTxt"/>
            </p>
            <p @click="$emit('close')"><button>close</button></p>
          </div>
        </div>
        `,
      props:{
        ModalData: Array,
        ModalId: Number
      },
      data:function(){
        return{
          currentSlide : this.ModalId
        }
      }
    }
  },
  created: function() {
    const json_url = "/json/photogallery.json";
    //JSONを取得してitemsに格納
    axios.get(json_url)
    //成功した場合
    .then(response => {this.items = response.data;});
  },
  computed: {
    filteredItems: function() {
     //略
      this.modalItems = this.items;
      return this.items;
    }
  },
  methods: 
    closeModal: function(){
      this.modalFlg = false;
      this.modalIndex = null;
    }
  }
});

closeModal関数部分にmodalFlg、modalIndexをconsole.logで出力すると、closeクリック時に問題なく出力されているので、emitによるイベントの受け渡しは成功していると思うのですが、実際のモーダルは閉じません。どういった原因が考えられるでしょうか。

２. 番号リスト
モーダルの一番外側のdivにcloseボタンと同様のイベントを、内部の白い領域にstopPropagationを使用した伝播を防ぐイベントを設定すると、closeボタンのみ効き、モーダルが閉じるようになります。

components:{
  'modal':{//一番目のdiv,二番目のdivに@clickを追加
    template : `
      <div class="gallery__overlay" @click="$emit('close')">
        <div class="gallery__modal modal"  @click="stopEvent">
        ~~
          <p @click="$emit('close')"><button>close</button></p>
        </div>
      </div>
      `,
      methods :{//イベントの伝播を止める
        stopEvent: function(){
          event.stopPropagation()
        },・・・

このことで望みの動作は実装できているのですが、挙動の理由が分かりません。そのような組み方をした場合、closeボタンと半透明のオーバーレイ部分にてcloseModal関数が発火できるようになると思われるのですが、オーバーレイ部分は反応しません。また、一番外側のdivからイベント設定を外すと、closeボタンのクリックイベントも効かなくなります。どのような原因が考えられるでしょうか。

よろしくお願いいたします。

※リンク切れは仕様です

参考ページは以下です。
https://reffect.co.jp/vue/understand-component-by-moda-window
http://frontendmemo.work/2019-08-13-183000/

Comments

[FKM]

divの方だけ$.emit('close')を残すとどうなりますか？

[c_nnnnnn]

div.gallery__overlayにだけ$.emit('close')を残すと、クリックに反応しなくなります。

Answer 1

コンポーネントを親子に分割しなくともそこまで複雑ではない仕様のため、直書きに変更して正常に動作するようになりました。
もう少しコンポーネントの親子関係について習熟後、挑戦したいと思います。ご回答ありがとうございます。

Answer 2

親コンポーネントと子コンポーネントの関係を、一度整理した方がいいと思います。

現状だと親コンポーネントにクリックイベントを渡しているのに、モーダルの開閉処理を行っているのは子コンポーネントの中にあるようです。

v-on:clickの中身にある$emit('close')は開閉処理を行うものではなく、this.$emitは子コンポーネントから親コンポーネントにイベントをコールバック関数化して受け渡すものです。なので、クリックによって親コンポーネントにイベントを飛ばしているのに、飛ばした先の親コンポーネントに開閉処理はないので、何も起きません。

Comments

[c_nnnnnn]

コメントありがとうございます。いま一度整理します。

まず子コンポーネントに$.emit('close')を設定し、イベントを親コンポーネントに渡しています。
親コンポーネントのHTML要素にはデータバインディングを用いて、v-on:close="closeModal"と記述し、子から渡ってきた関数にcloseModalメソッドをバインドしています。
親コンポーネント（インスタンス）には、closeModalがmethodsに設定してあり、インスタンスのプロパティを更新することでモーダル要素が閉じる仕組みとなっています（上から2つ目のコード：JavaScript下部参照）。そのため、「飛ばした先の親コンポーネントに開閉処理はない」ということはない認識なのですが、いかがでしょう。記述場所が誤っているなどでしょうか。
「現状だと親コンポーネントにクリックイベントを渡しているのに、モーダルの開閉処理を行っているのは子コンポーネントの中にあるようです。」とのことですが、そのような挙動を実現するために（子コンポーネントの動作を親コンポーネントに伝えてイベントを発火するために）、$.emitを使う必要があるという認識です。認識に誤りがありそうでしょうか。

[FKM]

開閉条件をv-show="modalFlg"だけにした場合どうなりますか？

[c_nnnnnn]

開閉条件をv-show="modalFlg"だけにして、divの外側のイベント・内部白い領域のstopPropagationイベントを削除し、closeボタンのみにイベントを付加した場合も、モーダルは閉じません。
開閉条件をv-show="modalFlg"だけにして、divの外側のイベント・内部白い領域のstopPropagationイベントはそのままにするとモーダルの開閉自体はできますが、<modal>はvue-masonryで並んだ各サムネイルの子要素としてそれぞれ配置しているため、index === modalIndexを削除すると他の全てのモーダルが背後に開いてしまう動作となります。v-for内に<modal>を配置しないとindexをうまく渡せなかったためこのような配置になっています。（モーダル要素をいくつも作らないですむよう、モーダルの開くタイミングでindexを取得してインスタンスプロパティにセットして、それを<modal>のv-bindに…とやろうとしましたがうまく値が渡りませんでした）

[FKM]

自分もテストしてみたんですが、Appに直書きだと動かない可能性があります。Appから親コンポーネントを作成し、その中にVue.createでテンプレートを作成するとモーダルは機能しました。リンク先にあるような最低限のモーダルが機能してるのを確認してから追加実装された方がいいと思いますが、最低限のモーダルが機能していることは確認済みでしょうか。

[c_nnnnnn]

テスト検証ありがとうございます。最低限のモーダル自体は機能しています。vue.createでのテンプレート作成と直書きでは挙動が異なる可能性があるのですね。