如何修改 bootstrap-vue 中的下拉项以打开模式？

Question

我如何修改下面的下拉列表以在 bootstrap vue 中包含一个模式：

我希望我的一些下拉项目能够打开一个模式，而一些成为 href。我对 href 没意见。但是我该如何让这些下拉项目中的一些打开模式？

<template>
  <b-dropdown-item v-bind="$props" :href="to ? undefined : href || '#'">
    <feather-icon size="1x" :icon="icon"/>
      {{name}}
  </b-dropdown-item>
</template>
<script>
import FeatherIcon from '@/components/FeatherIcon';
export default {
  name: 'feather-dd-item',
  props: ['icon', 'name', 'href', 'to'],
  components: { FeatherIcon }
};
</script>

Answer 1

您似乎正在将组件的 $props 展开到 <b-dropdown-item>。

您不能真正将 v-b-modal 添加到组件的道具中，因为这意味着在包装器上设置 v-b-modal，这将使包装器打开模态，而不是下拉项。所以我们需要一个替代道具来传输模态的 id 。我建议 modalTarget.
在标记内部，只需将 modalTarget（包含模态 ID）映射到 v-b-modal 指令：
<b-dropdown-item v-b-modal='modalTarget' />.

显然，您必须将 modalTarget 添加到 props 数组。最终标记应如下所示：

<template>
  <b-dropdown-item v-b-modal="modalTarget"
                   v-bind="$props"
                   :href="to ? undefined : href || '#'">
    <feather-icon size="1x" :icon="icon"/>
    {{name}}
  </b-dropdown-item>
</template>
<script>
import FeatherIcon from '@/components/FeatherIcon';
export default {
  name: 'feather-dd-item',
  props: ['icon', 'name', 'href', 'to', 'modalTarget'],
  components: { FeatherIcon }
};
</script>

应该可以。现在您可以使用

<feather-dd-item modalTarget="my-modal" />

，如果找到

，它将使用 id="my-modal" 打开模式。

如何修改 bootstrap-vue 中的下拉项以打开模式？

How can I modify a dropdown item in bootstrap-vue to open a modal?

javascript

vue.js

bootstrap-vue