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

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

Posted by: admin November 26, 2021 Leave a comment

Questions:

How can i modify the below drop down to include a modal in bootstrap vue:

I want some of my dropdown items to open a modal, and some to go to be href. I am ok with the href. But how do i go about making some of these drop down items open a modal?

<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>
Answers:

It looks like you’re spreading your component’s $props onto a <b-dropdown-item>.

You can’t really add v-b-modal to your components’ props because that would mean setting v-b-modal on the wrapper, which would make the wrapper open the modal, instead of the dropdown item. So we need a substitute prop to transport the id of the modal. I suggest modalTarget.
Inside the markup, just map modalTarget (containing the modal id) to v-b-modal directive:
<b-dropdown-item v-b-modal='modalTarget' />.

Obviously, you have to add modalTarget to the props array. Final markup should look like this:

<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>

Should work. Now you can use

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

, which will open the modal with id="my-modal", if it finds one.