vuejs - <slot> 在重复表行

Question

im using this solution to set table cells in a vuejs component dynamically:

http://forum.vuejs.org/topic/526/repeating-table-row-with-slot

This works just with Vue.js v1.0.10 but not with the current version v1.0.26.

Jsfiddle: https://jsfiddle.net/peL8fuz3/

I'm trying to get the following markup (the item object should be available in the component)

<div id="vue">
    <basic-table>
        <table-cell>{{ item.id }}</table-cell>
        <table-cell>{{ item.title }}</table-cell>
    </basic-table>
</div>

Vue.js component (more at the fiddle)

Vue.component('basic-table', {
    template: '<table><tbody><tr v-for="item in collection" v-slot></tr></tbody></table>',
    data: function () {
        return {
            collection: [
                {id: 1, title: 'Vue'},
                {id: 2, title: 'Vue 2'},
                {id: 3, title: 'Vue 3'},
                {id: 4, title: 'Vue 4'},
            ]
        }
    }
});

Anyone knows how to solve this?

Edit Didnt found a working solution yet - still searching..

Answer 1

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.

Answer 2

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>