“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">&nbsp; <b-button&nbsp; &nbsp; v-if="button.modalId"&nbsp; &nbsp; :key="button.name"&nbsp; &nbsp; :variant="button.variant"&nbsp; &nbsp; :class="`${button.class} mr-4`"&nbsp; &nbsp; v-b-modal="button.modalId"&nbsp; >{{ button.name }}</b-button>&nbsp; <b-button&nbsp; &nbsp; v-else-if="button.collapseId"&nbsp; &nbsp; :key="button.name"&nbsp; &nbsp; :variant="button.variant"&nbsp; &nbsp; :class="`${button.class} mr-4`"&nbsp; &nbsp; v-b-toggle="button.collapseId"&nbsp; >{{ button.name }}</b-button></template>https://github.com/bootstrap-vue/bootstrap-vue/issues/4243