How v-for in q-list with highlight

[splender99]

I want to highlight a q-list while using v-for? I tried the code below, list display properly but without highlight. Any other way to approach a solution with highlighting. Goals is to create a custom big list and a click will select into an input. q-select for big options in not really very intuitive.

Any suggestion will be appreciated. Thanks

# code block
<q-list highlight separator>
  <q-item @click="selectItem">
  </q-item>
  <div v-for="field in choices" highlight separator>
    <q-item @click="selectItem">
    <q-item-main>
      {{ field.value }} - {{ field.label }}
    </q-item-main>
    </q-item>
  </div>
</q-list>

[dfrnks]

Hi, you can using this.

code block

    <q-list highlight>
        <template v-for="(tp, k) in tp_produtos">
            <q-item-separator v-if="k" />
            <q-list-header>{{tp.descricao}}</q-list-header>
            <q-item v-for="prods in tp.prods" :key="prods.id">
                <q-item-main>
                    <q-item-tile label>{{prods.descricao}}</q-item-tile>
                    <q-item-tile sublabel>R${{prods.valor}}</q-item-tile>
                </q-item-main>
            </q-item>
        </template>
    </q-list>

[benoitranque]

major errors in your code

# code block
<q-list highlight separator>
  <q-item v-for="(field, index) in choices" highlight separator  @click="selectItem(field)">
    <q-item-main>
      {{ field.value }} - {{ field.label }}
    </q-item-main>
  </q-item>
</q-list>

[stuffy]

@benoitranque the above code doesn’t seem to highlight the selected q-item. Can you please check.

              <q-list highlight :padding="true">
                <q-item
                  highlight
                  v-for="plan in plans.data"
                  :data="plan"
                  :key="plan.id"
                  clickable
                  @click="btn"
                  v-ripple
                  active-class="text-orange-10 mnu_active"
                  class="q-pb-md"
                >

[stuffy]

Seems in V1 highlight is deprecated …

[metalsadman]

@stuffy said in How v-for in q-list with highlight:

Seems in V1 highlight is deprecated …

Use active https://quasar.dev/vue-components/list-and-list-items#Active-state