I am working with 2 components in Vue.js:
- An Accordion header that opens its content when clicked on.
- A Cog icon that opens a mini-modal menu.
The issue arises when I click on the cog icon - I do not want the Accordion to open its content.
Before clicking on the cog icon:
After clicking on the cog icon:
I have considered checking the modal menu display status in the Accordion (parent component), but I am unsure if this is the best 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: The Accordion opens after clicking on the cog icon (incorrect)
Expected results: The Accordion does not open after clicking on the cog icon