Qlist separator not showing when adding q-items in for-loop (Solved)
-
Hi there
I’ve come across a strange thing. I have a q-list with the “separator” flag turned on. When I manually add q-items like this:
<q-list dense bordered separator class="rounded-borders" style="width:100%"> <q-item clickable v-ripple class="text-blue-grey-9"> <q-item-section class="q-pa-xs"> <div class="flex"> <div class="text-subtitle2">KB Report</div> <q-space/> <div class="text-caption">mboeni</div> </div> <div class="text-caption">26.10.19 - 21:27:34</div> </q-item-section> </q-item> <q-item clickable v-ripple class="text-blue-grey-9"> <q-item-section class="q-pa-xs"> <div class="flex"> <div class="text-subtitle2">KB Report</div> <q-space/> <div class="text-caption">mboeni</div> </div> <div class="text-caption">26.10.19 - 21:27:34</div> </q-item-section> </q-item> </q-list>
I get the correct result, namely this:
But when I use a for loop to add items, like this:
<q-list dense bordered separator class="rounded-borders" style="width:100%"> <div v-for="n in 3" :key="n"> <q-item clickable v-ripple class="text-blue-grey-9"> <q-item-section class="q-pa-xs"> <div class="flex"> <div class="text-subtitle2">KB Report</div> <q-space/> <div class="text-caption">mboeni</div> </div> <div class="text-caption">26.10.19 - 21:27:34</div> </q-item-section> </q-item> </div> </q-list>
I get this:
Shouldn’t this be the same (i.e. show the separators correctly?
Any idea what I’m missing here?
Cheers,
Michael -
Fixed it by simply adding an explicit
<q-separator/>
after the q-item to be for-looped is constructed, like so:<div v-for="n in 3" :key="n"> <q-item clickable v-ripple class="text-blue-grey-9 q-pa-xs"> <q-item-section class="q-pa-xs" top> <q-item-label lines="1"> <span class="text-weight-medium text-blue-grey-9" style="font-size:12px">KB Report</span> <span class="text-blue-grey-6" style="font-size:12px"> - mboeni</span> </q-item-label> <q-item-label lines="1"> <span class="text-blue-grey-6" style="font-size:12px">27.10.19 [13:24]</span> </q-item-label> </q-item-section> <q-item-section side> <div class="text-blue-grey-9 q-gutter-xs"> <q-btn class="gt-xs" size="12px" flat dense round icon="delete" /> </div> </q-item-section> </q-item> <q-separator/> </div>