Hello Community! This is my first question asked here, so please be forgiving.
I'm using vue3, vite, bootstrap.
I'm working on a small app. One page loads some data from my server and passes it to a component to render a dropdown. If the user selects an item from dropdown, the button type/color should change.
The first time I open the dropdown and select something, the color changes but the dropdown does not close. If I click the main dropdown button again, it closes, after that the dropdown works as intended.
I nailed down the problem to line 20 in the child component,
selectOption(optionId, event) {
this.bSelectedOption = true;
where vue listens on click and sets a boolean value to true, which changes classes in the template (line 29)
<button
:class="bSelectedOption ? 'btn-success' : 'btn-danger'"
class="btn dropdown-toggle"
Commenting out line 20 makes bootstrap dropdown work as intended, except obviously changing of the color.
https://codesandbox.io/s/magical-leavitt-isk66v?file=/src/components/DropdownList.vue
I guess the first time around something happens in the event chain of click, maybe bootstrap get's some unfinished data while vue is working on the classes? But why opening the dropdown a second and nth time works flawlessly?
I hope to have positive feedback to this!
Top comments (0)