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



  • @chbarr thanks. Very much appreciated.