Vue.js

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

親から子へデータを渡す考え方を応用して、親が持つ配列データーをv-forディレクティブで子にデータバインドする。| Applying the idea of passing data from parent to child, the array data of the parent is data-bound to the child with the v-for directive.

「親コンポーネント(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>

実際の描画 | Actual drawing

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー