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

'v-b-modal'和'v-b-toggle'指令无法一起使用

1 个答案: