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

Question

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)

score 2 · Accepted Answer · answered Oct 12 '19 at 17:08

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

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

1 Answers1