title: Bind class to a slot in Vue.js 2
body: <p>I'm trying to create a reusable component for iterating over items, filtering them, and adding some classes to the slot (if the item is even, odd, first, last etc..)</p>
  
  <p>Here's my reusable component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;ul :class="classes"&gt;
      &lt;slot
        v-for="(item, index) in filteredItems"
        :item="item"
        :class="{
          'first': index == 0,
          'odd': !(index % 2),
          'even': index % 2,
          'last': index == (filteredItems.length - 1)
        }"
      &gt;
      &lt;/slot&gt;
    &lt;/ul&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ['items', 'classes'],
    data() {
      return {
        filteredItems: this.items.filter(item =&gt; item.active)
      };
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>And here's how I use it:</p>
  
  <pre><code>&lt;component-list :classes="'some-class'" :items="category.products"&gt;
    &lt;template scope="props"&gt;
      &lt;product :product="props.item"&gt;&lt;/product&gt;
    &lt;/template&gt;
  &lt;component-list&gt;
  </code></pre>
  
  <p>Everything works as expected, but it doesn't add classes to the element put inside .</p>
  
  <p>Am I doing anything wrong? Is it even technically possible in Vue.js 2 to do something like this?</p>
  
  <p>Thanks for any help or suggestion!</p>