vuejs - <slot> in repeating table row vuejs - <slot> in repeating table row vue.js vue.js

vuejs - <slot> in repeating table row


That's quite hard to find out what exactly gone wrong, but that code was broken since v1.0.18. I was unable to dig deeper to eliminate exact commit but there was a couple of optimizations made which potentially could affect $context._content rendering.

Solution

However you can solve your problem by changing

var raw = host.$options._content; 

to

var raw = host._context._directives.filter(function (value) {    return !(value.Component === undefined);})[0].el;

That change is compatible with v1.0.26. You can find fixed code here.

Disclaimer

I was failed to find a way to achieve the same result using public API. So this solution is also relies on non-public API thus may break in future release.


Aaron, my answer probably is not satisfied for your question but why don't you make it simple as the following code but you have to use directive and all of this stuff ?

I am still figuring why your solution is working on the previous version, not the current version. :D

new Vue({  el: '#vue',  data: {    items: [{      id: 1,      title: 'Vue'    }, {      id: 2,      title: 'Vue 2'    }, {      id: 3,      title: 'Vue 3'    }, {      id: 4,      title: 'Vue 4'    }, ]  }});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script><table border="1" class="table" id="vue">  <tbody>    <tr v-for="item in items">      <td>{{item.id}}</td>      <td>{{item.title}}</td>    </tr>  </tbody></table>