How to handle both click on whole q-item as well as button inside

[paul]

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>

[chbarr]

<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-side capture.stop : capture the event click and stop propagation

[paul]

@chbarr thanks. Very much appreciated.

[deadly]

This should be sticked! thanks!