How v-for in q-list with highlight



  • 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>
    


  • 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>


  • 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>