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:

    qlist1.png

    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:

    qlist2.png

    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>
    

Log in to reply