インラインテンプレートコンポーネントをネストする方法は？

Question

<overview>コンポーネントがあり、すべての連絡先を小道具に保持しています。

概要の中で、連絡先を繰り返して、それに応じて表の行を表示します。

ただし、すべてのテーブル行で、特定のメソッドに専用の<contact>コンポーネントを使用したいと考えています。

異なるデータリストに同じ<overview>コンポーネントを使用しているため、このネストされた機能を使用します。そして、各テーブル行の中で、例えば<contact>または<project>コンポーネントを使用します。
そのようにして、特定のコンポーネントメソッドなどを整理することができました。

しかし、私はこの作業を行う方法を見つけることができないようです。

https://jsfiddle.net/vbu8x8ko/

編集：私は、別の概要コンポーネントを作成したほうが良いなど<overview-contacts>など
、その後、任意の共有概要機能のためにミックスインを使用しますか？

これを行うと、すべてのテーブル行にネストされたコンポーネントはありません。

私はまだネストされたインラインテンプレートを動作させる方法を知りたいですが。

どのような考えですか？

Answer 1

inline-templateモードで問題が発生している可能性があります。より柔軟なテンプレートオーサリングが可能ですが、inline-templateは、テンプレートのスコープを推論するのを難しくしています。

Vue.config.debug = true; 
 
Vue.config.devtools = true; 
 
Vue.component('overview', { 
 
    \t props: [ 'contacts', 'columns' ], 
 
    template: `<table> 
 
      <thead> 
 
       <tr> 
 
        <template v-for="column in columns"> 
 
         <th>{{ column }}</th> 
 
        </template> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr v-for="value in contacts"> 
 
        <contact :contact="value" :columns="columns"></contact> 
 
       </tr> 
 
      </tbody> 
 
     </table>` 
 
}); 
 

 

 
Vue.component('contact', { 
 
    props: [ 'contact', 'columns' ], 
 
\t \t template: `<div><td v-for="column in columns">{{ valueForColumn(column) }}</td></div>`, 
 
    methods: { 
 

 
     valueForColumn(column) 
 
     { 
 
     debugger 
 
      if (column == 'name') 
 
      { 
 
       \t return this.contact.firstName +' '+ this.contact.lastName; 
 
      } 
 
     } 
 
    } 
 
}); 
 

 

 
new Vue({ 
 
    \t el: '#app' 
 
});

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
 
<div id="app"> 
 
    <overview :contacts="[ 
 
     { 
 
      'id':1, 
 
      'firstName':'John', 
 
      'lastName':'Doe' 
 
     }, 
 
     { 
 
      'id':2, 
 
      'firstName':'John', 
 
      'lastName':'Doe' 
 
     }, 
 
     { 
 
      'id':3, 
 
      'firstName':'John', 
 
      'lastName':'Doe' 
 
     } 
 
    ]" 
 
    :columns="[ 'id', 'name' ]" 
 
    ></overview> 
 
</div>