Как я могу изменить выпадающий элемент в bootstrap-vue, чтобы открыть модальное окно?
Как я могу изменить раскрывающийся список ниже, чтобы включить модальное окно в 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Похоже, вы распространяете $props вашего компонента на <b-dropdown-item>.
На самом деле вы не можете добавить v-b-modal к реквизитам ваших компонентов, потому что это означало бы установку v-b-modal в оболочке, что заставляло бы оболочку открывать модальное окно вместо выпадающего элемента. Итак, нам нужна альтернативная опора для переноса id модального окна. Я предлагаю modalTarget.
Внутри разметки просто сопоставьте modalTarget (содержащий модальный идентификатор) с директивой 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", если оно будет найдено.