директивы vb-modal и vb-toggle не работают вместе - PullRequest
Новая
       7

директивы vb-modal и vb-toggle не работают вместе

0 голосов
/ 12 октября 2019

С этой опцией кнопки работают только директивы v-b-toggle. Если комментарий одного из них (v-b-modal или v-b-toggle) все работает хорошо (например, если директива переключения комментариев, модальная директива начинает работать) 

<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"
    }
]

Что нужно сделать, чтобы все директивы работали?

Примечание! После горячей перезагрузки (webpack) он работает хорошо (каждая из директив отлично работает вместе)

1 Ответ

1 голос
/ 12 октября 2019

Вы должны переключиться на условно рендеринг кнопок только с необходимыми директивами. Эти две директивы конфликтуют друг с другом (в основном из-за различной разметки ARIA, добавленной к кнопкам триггера).

Сделайте это вместо: 

<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

...