How to handle both click on whole q-item as well as button inside
-
Following code will make that when clicking on the q-item always the code for moreButtonClick is executed and not showChild.
How can I force that when the whole item is clicked showChild is executed and only when the more button is click the corresponding button event is raised?<q-list link v-for="currentItem in items" :key="currentItem.id"> <q-item tag="label" @click="showChild()" > <q-item-main > <div> more stuff </div> </q-item-main> <q-item-side right> <q-btn @click="moreButtonClick(currentItem)" icon="more vert"> </q-btn> </q-item-side> </q-item> </q-list>
-
<div id="q-app"> <div class="q-ma-md"> <q-list link v-for="currentItem in items" :key="currentItem.id"> <q-item tag="label" @click.native.prevent="showChild()" > <q-item-main > <div> more stuff </div> </q-item-main> <q-item-side right> <q-btn @click.capture.stop="moreButtonClick(currentItem)" icon="more vert"></q-btn> </q-item-side> </q-item> </q-list> </div> </div>
In q-item
native.prevent
: preventDefault on the native Dom click event
in q-item-sidecapture.stop
: capture the event click and stop propagation -
@chbarr thanks. Very much appreciated.
-
This should be sticked! thanks!