javascript - 'vb-modal' 和 'vb-toggle' 指令不能一起工作

Question

使用此按钮选项仅工作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）后它运行良好（每个指令一起运行良好）

标签： javascriptvue.jsbootstrap-vue

Answer 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