0

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>
2
  • 1
    Does this answer your question? v-for without using html element in vue.js Commented Sep 23, 2023 at 10:47
  • a.) If you are using an UI Framewok like ant or bootstap have a look in docs for a proper select component. b.) Use optgroup and add the parent again as first option. c.) Use option with styling, see answer Selectable <optgroup>. Commented Oct 8, 2023 at 11:51

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.