Prevent collapsible toggle when button in header

[steve]

I have a Collapsible List with a buttons in the header slot. If I click on the button, the collasible item expands. How can I prevent this from happening?

<q-list separator class="q-mt-md" v-show="documents.length > 0">
   <q-collapsible v-for="(doc, index) in documents" :key="index" indent>
        <template slot="header">
            <q-item>
              <q-item-side left>
                 <q-btn icon="delete" @click="removeDocument(doc)" flat round />
               </q-item-side>
                <q-item-main :label="doc.title" />
              </q-item>
          </template>
          <div>
              {{doc.body}}
          </div>
  </q-collapsible>
</q-list>

[steve]

any ideas?

[chbarr]

use the event modifiers of vue (https://vuejs.org/v2/guide/events.html#Event-Modifiers)

you can add the stop modifier on q-btn. See in action: https://jsfiddle.net/f0cpycoL/1/

[steve]

@chbarr absolutely beautiful. I’ve used click.prevent, and knew there was something else available to stop to event trickle, which I now know is ‘stop’