'v-b-modal' 和 'v-b-toggle' 指令不能一起工作答案

【问题标题】：'v-b-modal' and 'v-b-toggle' directives not working together'v-b-modal' 和 'v-b-toggle' 指令不能一起工作
【发布时间】：2019-10-12 09:41:08
【问题描述】：

此按钮选项仅适用于 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>

数据：

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

需要做什么才能使所有指令起作用？

注意！热重载（webpack）后它运行良好（每个指令一起运行良好）

【问题讨论】：

标签： javascript vue.js bootstrap-vue

【解决方案1】：

您应该切换到仅使用所需指令的条件渲染按钮。这两个指令相互冲突（主要是由于在触发按钮中添加了不同的 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

【讨论】：