I am trying to loop through these categories from eBay and they have a parent category and then children category, but the parent category needs to be able to be selectable. That means I cant use optgroup so I attempted this way with a div tag and was going to add classes to style the parent category differently but the options do not appear in the UI. Is there any kind of parent element I can use here or does anyone have any suggestions of alternative solutions?
<div class="rr-field" v-if="ebay.categories">
<label class="rr-field__label">eBay Category</label>
<select class="rr-field__input" v-model="marketplaces.ebay.category">
<option :value="null">Select one..</option>
<div
v-for="(c, index) in ebay.categories"
:key="index"
>
<option :value="c.category.categoryId">
{{ c.category.categoryName }}
</option>
<option
v-for="(c, index) in c.categoryTreeNodeAncestors"
:key="index"
:value="c.categoryId"
>{{ c.categoryName }}</option
>
</div>
</select>