Vue scoped slot example

by Steve

HTML

<div id="app">
  <template id="my-awesome-list">
    <ul>
      <slot name="item" v-for="item in items" :text="item.text">
        {{item.text}}
        asdf
      </slot>
    </ul>
  </template>

  <section class="container">
    <div>
      <h1 class="title">
        slot-test
      </h1>
      <p>
       Scoped slot is taking over rendering of each element of Array inside the component
      </p>
      <p>
      Based heavily on the Vue documentation for
      <a href="https://vuejs.org/v2/guide/components.html#Scoped-Slots">Scoped slots</a>
      </p>
      <my-awesome-list :items="items">
        <!-- scoped slot can be named too -->
        <li slot="item" slot-scope="props" class="my-fancy-item">
          {{ props.text }}
        </li>
      </my-awesome-list>
    </div>
  </section>
</div>

Babel + JSX

Vue.component('my-awesome-list', {
  template: '#my-awesome-list',
  props: {
    items: Array,
  }
});

new Vue({
  el: '#app',
  data: {
    items: [
    	  {text: 'hello'},
        {text: 'world'},
        {text: 'test'},
        {text: 'this'}
    ]
  }
});