vue.jsでのコンポーネントにおける繰り返し描画する（v-for)ついて

　

コンポーネントを繰り返し描画する（v-for)

親から子へデータを渡す考え方を応用して、親が持つ配列データーをv-forディレクティブで子にデータバインドする。

　　　　

「親コンポーネント(main.js)」

var app = new Vue({
el: ‘#app’,
data: {
// 商品データの配列
products: [
{id: 01, name: ‘帽子’, price: 1280 },
{id: 02, name: ‘本’, price: 1580 },
{id: 03, name: ‘ギター’, price: 8980 }
]
}
});

「子コンポーネント(my-product.js)

Vue.component(‘my-product’,{
template: ‘<li>{{id}}　{{name}} {{price}}(円）</li>’,
props:[‘id’, ‘name’, ‘price’]
});

親のテンプレート(main.html)

<div id=”app”>
<!–子コンポーネントのテンプレートで配列データを描画する–>
<ul>
　　　<my-product v-for=”item in products”
v-bind=”item”
v-bind:key=”item.id”>
</my-product>
</ul>
</div>

実際の描画

わからないことはプロフェッショナルから学ぶのが一番