b-v-toggle does not appear to work with a click handler

Describe the bug

A clear and concise description of what the bug is.

Steps to reproduce the bug

We have a link that shows a b-collapse element like this:

    <b-card-header header-tag="header" role="tab">
          <a v-b-toggle="'week-' + i" href="#" @click="getDefaults">{{week.dates.join(' - ')}}</a> 
    </b-card-header>
    <b-collapse :id="'week-' + i" accordion="weeks" role="tabpanel" @show="getDefaults">

Toggling visibility of the b-collapse element doesn’t work unless we remove the @click directive (or set it to have no handler, like in the examples.)

Expected behavior

Clicking the link should show/hide the b-collapse element, even with an @click handler.

Versions

Libraries:

• BootstrapVue: 2.15.0
• Bootstrap: 4.5.0
• Vue: 2.6.11

Environment:

• OS: Linux
• Browser: Firefox
• Version: 76.0.1

[Hiws]

Okay.

So i played around with your jsfiddle. The reason you couldn’t reproduce it was because you forgot to add this. infront of your variables in the method.

After playing around with it, it seems to be that if you assign a value to a data property that’s present in the template, the collapse will no longer open. You can access them fine and use them. But any assignment will cancel out the collapse.

This appears to be a problem in version v2.14.0 and above.

So a temporary workaround would be to rollback to version v.2.13.0 where it should work as intended.

Reproduction of the issue with some comments: https://codepen.io/Hiws/pen/MWKbxYp

[Hiws]

Using vue-bootrap over at Riparian LLC. This showed up as a reported bug for us as well. We were only using the click handler to keep track of the state so that we could update the label (Show / Hide) with a caret that would animate 90 deg. We’re temporarily fixing this by removing the click handler and having the label only say “Toggle details”. Looking forward to the fix. Note that this was not an issue for us locally. I had to build and serve to preview the productionized code locally in order to reproduce the behavior, which of course was apparent in production environments.

You can use the v-model on b-collapse or b-sidebar, to get the current state of the component. This way you don’t have to manually toggle the property (i’m guessing), you were toggling in the click event.

Another way would be to do as Mangyvr and use a single method to update the lable and run this.$root.$emit('bv::toggle::collapse', 'my-collapse-id').