CODEWITHSUNDEEP
javascriptvue.jsbootstrap-vue
akim lyubchenko
akim lyubchenko

Reputation: 253

'v-b-modal' and 'v-b-toggle' directives not working together

With this button options working only v-b-toggle directive. If comment one of them(either v-b-modal or v-b-toggle) everything works well(e.g. if comment toggle directive, modal directive starts working)

<b-button
    v-for="button in headerButtons"
    :key="button.name"
    :variant="button.variant"
    :class="`${button.class} mr-4`"
    v-b-modal="button.modalId"
    v-b-toggle="button.collapseId"
>{{ button.name }}</b-button>

data:

headerButtons: [
    {
        name: "btn 1",
        variant: "success",
        class: "green",
        modalId: "new-exchange-modal"
    },
    {
        name: "btn 2",
        variant: "info",
        collapseId: "search-collapse",
        class: "blue"
    }
]

What needs to be done to make all directives work?

Note! After hot reload(webpack) it works well(each of directives works fine together)

Upvotes: 0

Views: 461

Answers (1)

Troy Morehouse
Troy Morehouse

Reputation: 5435

You should switch to conditionally rendering buttons with only the required directives. These two directives conflict with each other (mainly due to different ARIA markup added to the trigger buttons).

Do this instead:

<tempate v-for="button in headerButtons">
  <b-button
    v-if="button.modalId"
    :key="button.name"
    :variant="button.variant"
    :class="`${button.class} mr-4`"
    v-b-modal="button.modalId"
  >{{ button.name }}</b-button>
  <b-button
    v-else-if="button.collapseId"
    :key="button.name"
    :variant="button.variant"
    :class="`${button.class} mr-4`"
    v-b-toggle="button.collapseId"
  >{{ button.name }}</b-button>
</template>

https://github.com/bootstrap-vue/bootstrap-vue/issues/4243

Upvotes: 2

Related Questions