イベントが2重で発火してしまう場合（Vue.js）

Question

@clickでイベントが２重で起こってしまう場合、どのように対処すれば良いのでしょうか？

＜やりたいこと＞
・リストの行をclickをすると「onSelect（）」が発動して<MedicineDetail>がモーダルで出現する。
・しかし一番右行のボタン「AD確認」をクリックした際は「showModal()」のみが発動して、変数showChangeUser をtrueにしたい（＝＜ChangeUser＞をモーダルとして出現させる）

＜現状＞
「AD確認」のボタンを押すと<MedicineDetail>と<ChangeUser>の２つともモーダルが出現してしまう（=変数showChangeUser,showMedicineDetailがどちらもtrueになる）

<試したこと>
下のコードのように、「showModal()」の中で「showMedicalDetail = false」としてみてもダメでした。

ちなみに「md-◯◯」は「Vue Material（https://vuematerial.io/components/）」によるタグです。

　　<md-table v-model="users" md-sort="name" @md-selected="onSelect()">
      <md-table-row slot="md-table-row" slot-scope="{ item }" :class="getClass(item)">
        <md-table-cell md-label="患者ID">{{ item.patientId }}</md-table-cell>
                          ~~中略~~
        <md-table-cell md-label="AD確認" md-sort-by="confirmation">
          <md-button @click="showModal()">AD確認</md-button>
        </md-table-cell>
      </md-table-row>
    </md-table>
  </div>

  <md-dialog :md-active.sync="showMedicineDetail">
    <MedicineDetail />
  </md-dialog>

  <md-dialog :md-active.sync="showChangeUser">
    <ChangeUser />
  </md-dialog>

methods: {
    getClass: ({
      patientId
    }) => ({
      "md-accent": patientId !== null
    }),
    onSelect(item) {
      this.selected = item;
      this.showMedicineDetail = true;
    },
    showModal() {
      this.showMedicineDetail = false;
      this.showChangeUser = true;
    }
  }

Answer 1

こうかな？違ってたらすみません…

<md-button @click.stop="showModal()">AD確認</md-button>

Comments

[yoshiaki-kiryu]

できました！ありがとうございます。
あともしよろしければなのですが、画面を表示した瞬間、何もしていないときに「@md-selected="onSelect()"」が発動されてしまうようで、変数showMedicineDetail　がtrueになります（つまり <MedicineDetail />がモーダルで現れます。）
こちらの解決法がわかるようでしたらご教示いただけれると嬉しいです。
この質問内で申し訳ありません。

[sousuke]

Vue Materialがよくわからないんですが
@md-selected="onSelect"こうじゃないですかね？カッコはいらないはずです。

[yoshiaki-kiryu]

ご回答いただきありがとうございます。
残念ながらそのようにしてみても変わらずでした。。。

[sousuke]

そうですか。とりあえず小さく作ってmd-selectedが必ず一回起きるのかどうかを調べて、起きるならそれ前提に作るしか無いですし、起きないならそれを起こすコードがあるということです。がんばってくださいｂ

Answer 2

showModal($event)

という感じでイベントオブジェクトを渡して、

showModal(event) {
  event.stopPropagation()
  ...
}

という感じでイベントの伝播を止めてみてはいかがでしょう

Comments

[naga3]

sousukeさんの.stopでできますね…
こちらの答えは無視してください

[yoshiaki-kiryu]

ご回答いただきありがとうございます！
naga3さんのやり方でもできました！