Custom clicking on accordion tab header

[colinbes]

I am looking for suggestions/advice on how to best implement accordion/accordiontab where I require clickable icons in the header (in my case the pi-play and the doAssign icons.

In code below, clicking on icon works but the accordion tab will open/close and I would like to prevent this from happening.

Current code for accordion tab is

Code: Select all

        <AccordionTab
          v-for="item in recipes" :key="item._id.$oid"                  
        >
          <template #header>
            <div class="flex-grow-1">{{item.name}}: {{item.description}}</div>
            <div class="flex-grow-0">
              <i title="Assign to favorite" style1="background-color:yellow; font-size:120%;padding:10px;" @click="doAssign(item)" class="pi" :class="isAssigned(item)"></i>
            </div>
            <div class="flex-grow-0">
              <i title="Run now" style1="background-color:lightcoral; font-size:120%;padding:10px;" class="pi pi-play pr-2"></i>
            </div>
          </template>
          <h3>{{item.description}}</h3>
          <p>{{item.notes}}</p>
        </AccordionTab>

[colinbes]

Not sure why it didn't work earlier on but @click.stop="doAssign(item) seems to do the trick.