My Nuxt 2 SSR + Bootstrap 5 application includes the following code snippet:
<button
v-for="file of orderProduct.files"
class="collapsed son-collapse"
type="button"
data-bs-toggle="collapse"
:data-bs-target="`#collapseField${orderProduct.id}`"
aria-expanded="false"
:aria-controls="`collapseField${orderProduct.id}`"
>
<p><i class="fa fa-file-alt"></i> {{ file.original_filename }}</p>
<div>
<a
@click.stop
:href="`http://example.com`"
target="_blank"
>
<i class="far fa-eye"></i>View
</a>
<span>{{ file.page_count }} {{ $tc('home.pagina', file.page_count) }}</span>
</div>
</button>
<div
:id="`collapseField${orderProduct.id}`"
class="collapse summary cost-ajax"
>
...
</div>
Although Bootstrap's JS Collapse component toggles the corresponding div when the button is clicked, I am facing an issue where a tab should open upon clicking the anchor tag.
The tab does not open as expected. Instead, the div is toggled because the click event on the anchor propagates into the button. I have attempted to address this by using Vue.js's built-in event modifier @click.stop and even tried calling e.stopPropagation() within a method, but these solutions have not corrected the behavior.
Interestingly, clicking on the i tag inside the anchor opens the tab, while the collapsible element still toggles. This behavior adds to the complexity of the issue.