Select with multiple level in vueJS

Question

I would like to have a select with several levels

I wanted to use <optgroup> but this one cannot be selected so I found a solution on another post, put <option> by adding a space at the beginning to make the different levels.

<select>
    <option>select me</option>
    <option>&nbsp;me indented</option>
    <option>&nbsp;&nbsp;even more indentation</option>
</select>

Except I have to do it dynamically using a v-for.

<select v-model="form.contact.object" id="object">
    <option disabled value="null">Default text</option>
    <div v-for="(obj, i) in list" :key="i" :value="i">
        <option>{{ obj.list.label }}</option>
        <option v-for="(child, j) in obj.listChildren" :key="j" :value="j">&nbsp;{{ child.list.label }}</option>
     </div>
</select>

So I tried to use a div for my first loop but it doesn't work. The goal is to make a first for to retrieve the parent then a second for to retrieve the children

IVO GELOV · Accepted Answer · 2022-08-02 12:06:26Z

1

You should make something like this:

<select v-model="form.contact.object">
  <option disabled :value="null">Default text</option>
  <template v-for="(obj, i) in list" :key="'p_'+i">
    <option :value="'parent_'+i">{{ obj.listLabel }}</option>
    <option v-for="(child, j) in obj.listChildren" :key="'c_'+j" :value="'child_'+j" style="padding-left: 16px;">{{ child.listLabel }}</option>
  </template>
</select>

answered Aug 2, 2022 at 12:06

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Select with multiple level in vueJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related