No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    1
    2
    701
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • mboeni
      mboeni last edited by 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:

      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

      mboeni 1 Reply Last reply Reply Quote 0
      • mboeni
        mboeni @mboeni last edited by

        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>
        
        1 Reply Last reply Reply Quote 0
        • First post
          Last post