Vue расслоение плотной v-за не зацикливание через свойства компонента

Question

У меня есть следующие настройки:

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-инструментах, я построил this example, похоже, делает то же самое (итерация через массив, переданный в compent через prop).

Никакие ошибки/предупреждения в консоли, я не буду совсем потерялась, спасибо за вашу помощь

Answer 1

Я играл с ним немного, и получил это работает. Here is a working fork of your project. Изменения, которые я сделал, находятся в разделе HTML, где находится <div id="listTemplate">, и я добавил template: '#listTemplate' в декларацию компонента списка продуктов

Я думаю, что у вас просто немного непонимание того, что такое компонент Vue. Компонент Vue представляет собой многоразовый набор JavaScript и HTML-кода, который вы можете просто вводить в любом месте. Вам нужно определить, какой компонент выглядит внутри шаблона, а THEN вы можете просто сказать <product-list></product-list> из вашего экземпляра App Vue.

Что такое шаблон, так это просто определить, какой HTML-код будет размещаться везде, где есть теги компонента. Для вашего примера подумайте о <product-list></product-list>, просто скажите «скопируйте и вставьте содержимое <div id="listTemplate"> прямо здесь»