Apply 'striped' vue-propery to items rendered with v-for?

[joefly]

I have the following component, however the striped property doesn’t seem to be working.

    <q-list no-border>
      <q-list-header>My List:</q-list-header>
      <q-transition appear group enter="fadeIn" leave="fadeOut">
        <q-item v-for="(item, index) in items" :key="index">
          <q-item-side>
            <q-checkbox v-model="item.completed" @click.native="saveList" />
          </q-item-side>
          <q-item-main :label="item.label" />
        </q-item>
      </q-transition>
    </q-list>

Is there any way to apply the ‘striped’ vue-propery to list items rendered with v-for?

[benoitranque]

You seem to have forgotten the striped prop…

    <q-list no-border striped>
      <q-list-header>My List:</q-list-header>
      <q-transition appear group enter="fadeIn" leave="fadeOut">
        <q-item v-for="(item, index) in items" :key="index">
          <q-item-side>
            <q-checkbox v-model="item.completed" @click.native="saveList" />
          </q-item-side>
          <q-item-main :label="item.label" />
        </q-item>
      </q-transition>
    </q-list>

[joefly]

@benoitranque

My apologies…I forgot to include that in the example.

I did try using the “striped” prop, but I still don’t get striped list items.

I’m going to do some more testing on it tonight.

Thanks for your response

[joefly]

Okay, what I discovered is that the striped prop doesn’t work if wrapped with q-transition. I removed q-transition and the list items are highlighting correctly.

I don’t know why, so feel free to chime in with a reason/solution.

Thanks

[benoitranque]

It appears this file on line 100 is responsible. Feel free to make a PR

[rstoenescu]

The “striped” property adds a CSS class to the QItem(s) which uses a CSS selector to tell which QItems should have different background color. But the CSS selector takes into account all DOM nodes (including ones which have CSS to hide them). By using QTransition/Vue-transition, some QItems may be in that case so the “striped” may appear broken (as it does not take into account the “hidden from view” nodes, it just takes into account all DOM sibling nodes). One solution to this would be to write and apply a custom CSS class based on the index on that v-for, something like if index divides by 2, then apply that class.

[joefly]

@benoitranque @rstoenescu

Great! That works ! Thanks

Template:

    <q-list no-border striped>
      <q-list-header>My List:</q-list-header>
      <q-transition appear group enter="fadeIn" leave="fadeOut">
        <q-item v-for="(item, index) in items" :key="index" :class="{striped: isOdd(index)}">
          <q-item-side>
            <q-checkbox v-model="item.completed" @click.native="saveList" />
          </q-item-side>
          <q-item-main :label="item.label" />
        </q-item>
      </q-transition>
    </q-list>

Return true if index divides by 2:

    methods: {
          isOdd (index) {
            if (index % 2 === 0) {
                 return true
             }
          }
      }

Stylus Class:

    .striped
        background-color #ccc