“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）之后它运行良好（每个指令都可以很好地协同工作）

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