vuejs - <slot> 重复 table 行

Question

我正在使用此解决方案在 vuejs 组件中动态设置 table 单元格：

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

这仅适用于 Vue.js v1.0.10，但不适用于当前版本 v1.0.26。

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

我正在尝试获取以下标记（项目对象应该在组件中可用）

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

Vue.js 组件（更多内容在 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'},
            ]
        }
    }
});

有人知道怎么解决吗？

编辑尚未找到可行的解决方案 - 仍在搜索中..

Answer 1

亚伦，我的回答可能对你的问题不满意，但你为什么不像下面的代码那样简单，而是你必须使用指令和所有这些东西？

我还在想为什么你的解决方案适用于以前的版本，而不适用于当前版本。 :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>

Answer 2

很难找出到底出了什么问题，但该代码自 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.

免责声明

我未能找到使用 public API 获得相同结果的方法。所以这个解决方案也依赖于非public API 因此可能会在未来的版本中中断。

vuejs - <slot> 重复 table 行

vuejs - <slot> in repeating table row

javascript

components

vue.js

vue-component

解决方案

免责声明