@clickでイベントが2重で起こってしまう場合、どのように対処すれば良いのでしょうか?
<やりたいこと>
・リストの行をclickをすると「onSelect()」が発動して<MedicineDetail>がモーダルで出現する。
・しかし一番右行のボタン「AD確認」をクリックした際は「showModal()」のみが発動して、変数showChangeUser をtrueにしたい(=<ChangeUser>をモーダルとして出現させる)
<現状>
「AD確認」のボタンを押すと<MedicineDetail>と<ChangeUser>の2つともモーダルが出現してしまう(=変数showChangeUser,showMedicineDetailがどちらもtrueになる)
<試したこと>
下のコードのように、「showModal()」の中で「showMedicalDetail = false」としてみてもダメでした。
ちなみに「md-◯◯」は「Vue Material(https://vuematerial.io/components/)」によるタグです。
html
1 <md-table v-model="users" md-sort="name" @md-selected="onSelect()"> 2 <md-table-row slot="md-table-row" slot-scope="{ item }" :class="getClass(item)"> 3 <md-table-cell md-label="患者ID">{{ item.patientId }}</md-table-cell> 4 ~~中略~~ 5 <md-table-cell md-label="AD確認" md-sort-by="confirmation"> 6 <md-button @click="showModal()">AD確認</md-button> 7 </md-table-cell> 8 </md-table-row> 9 </md-table> 10 </div> 11 12 <md-dialog :md-active.sync="showMedicineDetail"> 13 <MedicineDetail /> 14 </md-dialog> 15 16 <md-dialog :md-active.sync="showChangeUser"> 17 <ChangeUser /> 18 </md-dialog> 19
javascript
1 2methods: { 3 getClass: ({ 4 patientId 5 }) => ({ 6 "md-accent": patientId !== null 7 }), 8 onSelect(item) { 9 this.selected = item; 10 this.showMedicineDetail = true; 11 }, 12 showModal() { 13 this.showMedicineDetail = false; 14 this.showChangeUser = true; 15 } 16 }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/27 07:14
2018/03/27 14:41
2018/03/27 23:44
2018/03/28 01:15