title: Can I use slot in a vuejs loop?
body: <p>I have a template that loops using v-for. In the template I have a named slot with the name being dynamically assigned in the loop. No content is appearing, what am I doing wrong?</p>
  
  <pre><code>&lt;todo-tabs :list="items"&gt;
      &lt;div slot="interview"&gt;Interview&lt;/div&gt;
      &lt;div slot="membership"&gt;Membership&lt;/div&gt;
      &lt;div slot="profile"&gt;Profile&lt;/div&gt;
      &lt;div slot="handoff"&gt;Handoff&lt;/div&gt;
  &lt;/todo-tabs&gt;
  
  &lt;template id="todo-tabs"&gt;
              &lt;div class="tab-content "&gt;      
                  &lt;div v-for="item in list" :class="{'active': item.current}" class="tab-pane" id="@{{ item.id }}"&gt;
                      &lt;div class="skin skin-square"&gt;
                      &lt;form class="form-horizontal" role="form"&gt;
                      &lt;div class="form-body"&gt;
                          &lt;slot name="@{{ item.id }}"&gt;&lt;/slot&gt;
                      &lt;/div&gt;
                      &lt;div class="form-actions"&gt;
                          &lt;button type="submit" class="btn red btn-outline"&gt;Submit&lt;/button&gt;
                          &lt;button type="button" class="btn default"&gt;Cancel&lt;/button&gt;
                      &lt;/div&gt;
                      &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/template&gt;
  
  &lt;script&gt;
  Vue.component('todo-tabs', {
          template: '#todo-tabs',
          props: ['list']
   });
   var vm = new Vue({
  el: "#todo",
  data: {
  items : [
              {id: 'interview', name: 'interview', complete: true, body: 'something1', step_content: 'SOME'  },
              {id: 'membership', name: 'membership', complete: false, body: 'something2', step_content: 'SOME' },
              {id: 'profile', name: 'profile', complete: false, body: 'something3', step_content: 'SOME', current: true  },
              {id: 'handoff', name: 'handoff', complete: false, body: 'something4', step_content: 'SOME'}
          ]
      }
  });
  &lt;/script&gt;
  </code></pre>