Vue.js 在重复表行中

发布于08月20日

im使用此解决方案动态设置vuejs组件中的表格单元格:

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

这只适用于Vue.JSV1.0.10，但不适用于当前版本v1.0.26.

我正在try 获取以下标记(item对象应该在组件中可用)

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

Vue.js组件(更多细节)

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'},
            ]
        }
    }
});

有人知道怎么解决这个问题吗？

Edit

推荐答案

很难找出到底出了什么问题，但这段代码从v1.0.18年就被破解了.我无法深入挖掘以消除精确提交，但进行了一些优化，可能会影响$context._content次渲染.

解决方案

然而，你可以通过改变来解决你的问题

var raw = host.$options._content;

到

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

这种变化与v1.0.26兼容.你可以找到固定代码here.

免责声明

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