I am currently utilizing Bootstrap Vue to construct a dynamic Dropdown component that can render different elements such as item, title, and divider. Is there a method to accomplish this task effectively?
The desired outcome for the Dropdown component would be structured like this:
<template>
<b-dropdown>
<b-dropdown-{{option.element}}
v-bind:key="index"
v-for="option in data"
:value="option.id"
>{{ option.value }}</b-dropdown-{{option.element}}
>
</b-dropdown>
</template>
<script>
export default {
name: 'Dropdown',
props: {
data: data
}
}
</script>
The expected rendered output should look like this:
<b-dropdown-title>I am a title</b-dropdown-title>
<b-dropdown-item>And I am an item</b-dropdown-item>
<b-dropdown-item>I am another item</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
To achieve this, data can be passed from the parent component as shown below:
<Dropdown id="modules-dropdown" v-data="data"></Dropdown>
import Dropdown from './Dropdown'
const dropdownData = [{id: 1, value: 'I am a title', element: 'title'}, {id: 2, value: 'And I am an item', element: 'item'}, {id: 3, value: 'I am another item', element: 'item'}, {id: 4, element: 'divider'}]
export default {
name: 'ParentComponent',
components: {
Dropdown
},
data () {
return {
data: dropdownData,
}
},
}