Vue.js モーダルがうまく表示されない

Question

Action.vueでシェアボタンを押すとシェアモーダルが表示されます。
同じようにindex.vueでもシェアモーダルを表示したく、シェアボタンを追加しモーダルを表示する処理をAction.vueからコピペしたのですが、なぜかモーダルが表示されません。
わかる人がいましたらご教授お願いします

// index.vue
      <div id="share-button" @click="onClickShare()">
        <img :src="shareImgUrl()" class="action-button-icon" />
        シェア
      </div>

// Action.vue
<template>
  <div v-if="isAppView()" class="action">
    <div id="share-button" @click="onClickShare()" class="action-button">
      <img :src="shareImgUrl()" class="action-button-icon" />
      シェア
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Offer } from '@/offer/models/offer'
import { authStore } from '@/store'
@Component
export default class Action extends Vue {
  @Prop({ type: Object, required: true }) offer: Offer
  shareImgUrl() {
    return '/img/share.svg'
  }
  onClickShare() {
    this.$emit('onClickShare')
  }
  isAppView() {
    return (
      authStore.osType === 'android' ||
      authStore.osType === 'ios'
    )
  }
}

Answer 1

this.$emit('onClickShare') では親のメソッドを呼び出していると思うのですが、
親側がちゃんとonClickShareメソッドを渡せているか確認お願いできますか？
<action @onClickShare="onClickShare" />
みたいになっていると思います
きちんと呼び出せていたら、次は親のonClickShareの中身がちゃんと動いているか確認する必要があります。

Comments

[whiwhdiw]

ありがとうございます。
$emitというは親でonClick() というメソッドがあったらそれを子でしようできるということでしょうか？

[oec]

親に onClickShare があって、なおかつcomponentを呼んでいるところで @onClickShare="onClickShare" とすると子に親のメソッドを使えるようにしてあげています

参考：https://orizuru.io/blog/vue-js/vue_emit-props/