9

このソリューションを使用して、vuejs コンポーネントのテーブル セルを動的に設定します。

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 コンポーネント (詳細はフィドルで)

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

誰でもこれを解決する方法を知っていますか?

編集 まだ有効な解決策が見つかりませんでした-まだ検索中です..

4

2 に答える 2

3

正確に何が問題なのかを突き止めるのは非常に困難ですが、そのコードは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と互換性があります。固定コードはこちらにあります。

免責事項

パブリック API を使用して同じ結果を達成する方法を見つけることができませんでした。したがって、このソリューションは非公開 API にも依存しているため、将来のリリースで機能しなくなる可能性があります。

于 2016-08-19T23:11:57.123 に答える
2

アーロン、私の答えはおそらくあなたの質問には満足していませんが、次のコードのように単純にしてみませんか？

あなたのソリューションが現在のバージョンではなく、以前のバージョンで機能している理由をまだ考えています。: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>

于 2016-08-18T10:31:46.197 に答える