q-infinite-scroll with nested row / columns

[steve]

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>

[steve]

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>