Qlist separator not showing when adding q-items in for-loop (Solved)

[mboeni]

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

[mboeni]

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>