Problem with onclick event in parent & child component

Question

I have 2 components in Vue.js :

1. Accordion header which open it's content after clicking on it.
2. Cog icon which open mini-modal menu.

Problem is that when I'm clicking on cog, I don't want accordion to open it's content.

Before click on cog:

After click on cog:

I thought about checking modal menu display status in Accordion (parent component) but I'm not sure it's good approach.

<i class="fa fa-cog" @click="toggleSettings"/>
<div 
  class="order-settings" 
  :class="{'order-settings__show':isSettingsOpen}">
  <div class="order-settings__option"><p>Re-order</p></div>
  <div class="order-settings__option"><p>Convert to subscription</p</div>
  <div class="order-settings__option"><p>Download invoice</p></div>
  <div class="order-settings__option"><p>Export to CSV</p></div>
</div>

Actual results: Accordion open after clicking on cog (wrong)

Expected results: Accordion doesn't open after clicking on cog

Answer 1

add the stop modifier to the cog click event like so

@click.stop="toggleSettings"

It's how you do event.stopPropagation() in Vue.js