Here is the code snippet for my dropdown element:
<b-dropdown id="SchemaDropdown"
name="SchemaDropdown"
variant="form-control"
class=""
style="width: 100%"
v-on:change="changeItem">
<span slot=text>{{schemaName}}</span>
<b-dropdown-item v-for="option in schemas.Formats"
:key="option.mappingId"
:value="option.mapping"
@click="changeItem(option.mappingId)">
{{option.mapping}}
</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
</b-dropdown>
The schemas object contains available schemas and their corresponding GUIDs. The dropdown functions correctly, selecting schemas as intended.
In the system, the first two schemas are default while the rest are customizable based on user settings. Some users may have only a few custom schemas, while others may have many.
I would like to add a divider after the second default schema to structure the dropdown like this:
Default Schema 1
Default Schema 2
----------------
User Configured 1
User Configured 2
etc...
How can I insert the `b-dropdown-divider` at a specific position in the dropdown?