I am currently developing a Single Page Application (SPA) using Vue.js 3 and Bootstrap 5. On the main page, I have implemented the Bootstrap Offcanvas element with code that closely resembles the one provided in the documentation.
The structure of the offcanvas element is as follows:
<div class="offcanvas offcanvas-start" tabindex="-1" id="categories">
<div class="offcanvas-header">
...
</div>
<div class="offcanvas-body">
...
</div>
</div>
This anchor tag triggers the offcanvas:
<a data-bs-toggle="offcanvas" href="#categories" role="button">Categories</a>
In the Bootstrap documentation, it's mentioned that the Offcanvas div emits certain events like shown and hidden, but the complete event names are actually shown.bs.offcanvas and
hidden.bs.offcanvas</code. To listen to these events in vanilla JavaScript, you would typically use <code>addEventListener@show.bs.offcanvas="console.log('Showing');"
// or
v-on:show.bs.offcanvas="console.log('Showing');"
to the Offcanvas div, I encountered the following errors:
/Path/To/File/NavBar.vue
48:123 error 'v-on' directives don't support the modifier 'bs' vue/valid-v-on
48:126 error 'v-on' directives don't support the modifier 'offcanvas' vue/valid-v-on
✖ 2 problems (2 errors, 0 warnings)
It appears that Vue interprets . as an Event Modifier for bs and offcanvas.
Has anyone else faced a similar issue or knows how to specify the exact event?