ヴューJS V-のためのコンポーネント・プロパティ

Question

スルーループしていないI次のセットアップがあります。

JS

var session = { 
    content : { 
     products : { 
      options : { 
       page : 1, 
       productsPerPage : 20, 
       orderBy : 'customPriority', 
       orderDirection : 'asc' 
      }, 
      productList : [ 
        {name: 'a'}, 
        {name: 'b'}, 
        {name: 'c'}, 
        {name: 'd'}, 
      ] 
     } 
    } 
} 


Vue.component('product-list', { 
    props: { 
     options: { type: Object }, 
     products : { type: Array, required: true } 
    } 
}) 

var app = new Vue({ 
    el: '#app', 
    data: session 
}) 

HTML

<div id="app"> 
    <product-list 
     :options="content.products.options" 
     :products="content.products.productList" 
    > 
    <div 
     v-for="product in products" 
    > 
     <h1> 
     {{product.name}} 
     </h1> 
    </div> 
    </product-list> 
</div> 

（jsFiddle：https://jsfiddle.net/Lfw94bgz/1/）

を

私の問題は、v-forディレクティブが動作していないように見えて、製品の配列が定義されており、vue-dev-toolsで表示されていることです。this exampleは同じことをしているようです支柱を介してcompent）。

コンソールにエラー/警告、私は、あなたの助け

Answer 1

に感謝、非常に迷ってしまいました私はそれを周りにビットを演奏し、それが働いてしまいました。 Here is a working fork of your project。私が行った変更は<div id="listTemplate">であるHTMLセクションにあり、製品リストのコンポーネント宣言にを追加しました

Vueコンポーネントについての誤解が少しあります。 Vueコンポーネントは、JavaScriptとHTMLコードの再利用可能なセットで、必要な場所に簡単に挿入できます。テンプレート内でのコンポーネントの外観を定義する必要があります。次に、App Vueインスタンス内から単に<product-list></product-list>と言うことができます。

テンプレートの機能は、コンポーネントタグがある場所にHTMLコードを配置することだけです。あなたの例では、<product-list></product-list>というだけで "<div id="listTemplate">の内容をコピーして貼り付けてください"と考えています。