q-infinite-scroll with nested row / columns



  • I have a single row with numerous cols containing q-cards displayed on my page. The column classes (col-sm-6 col-md-4) evenly distribute all the cards based upon the layout of the screen.

    I want to utilize QInfiniteScroll, however it expects the first element to have the v-for loop. Since my row does not, I have to put it outside the q-infinite-scroll element. Now because of this, the css is not right to pick up and handled the nested columns.

    It would be nice if there was a content-class on q-infinite-scroll so that I can apply ‘row’ on the inner ‘q-infinite-scroll-content’ div. Any other ideas on how to get this to work?

    <div class="row gutter-sm"><!-- Where should this be applied? It won't work here or inside or on the q-infinite-scroll -->
    <q-infinite-scroll :handler="loadMore" ref="cardScroll">
      <div v-for="(card, index) in cards" :key="index" inline class="col-sm-6 col-md-4">
          <q-card >this is a card</q-card>
       </div>
    </q-infinite-scroll>
    </div>


  • I’ve modified the source of QInfiniteScroll.js to include a contentClasses prop so that a css class can be applied to the inner q-infinite-scroll-content div. From what I see, no other css was being applied to that element.

    If this looks like something you want merged, I can create a PR.

    QInfiniteScroll.js

    export default {
      name: 'QInfiniteScroll',
        props: {
          handler: {
            type: Function,
            required: true
          },
          inline: Boolean,
          offset: {
            type: Number,
            default: 0
          },
          contentClasses: [Object, Array, String]
    

    render (h) {
        return h('div', { staticClass: 'q-infinite-scroll' }, [
          h('div', {
            ref: 'content',
            staticClass: 'q-infinite-scroll-content',
            'class': this.contentClasses
          }, this.$slots.default),
          this.fetching
            ? h('div', { staticClass: 'q-infinite-scroll-message' }, this.$slots.message)
            : null
        ])
      }
    

    Then I was able to do this:

     <q-infinite-scroll :handler="loadMore" ref="cardScroll" content-classes="row gutter-sm">
      <div v-for="(card, index) in cards" :key="index" inline class="col-sm-6 col-md-4">
          <q-card >this is a card</q-card>
       </div>
    </q-infinite-scroll>