公式ホームページのIntro to Vue 3クラス5 (List Rendering)

# 5. List Rendering

>クラス https://www.vuemastery.com/courses/intro-to-vue-3/list-rendering-vue3

VS Codeから該当フォルダを選択して、開きます。その後に、配下のgit部分をクリックして、ブランチをL5-startへ入れ替えてください。


>ブランチ切り替え方法 https://qiita.com/phjg81/items/e6695eb2334d9297a318

今日のポイントはリストの表示です。
あるデータオブジェクトに入っている配列を繰り返して表示したい場合はv-forを使います。

```javascript:main.js
const app = Vue.createApp({
    data() {
        return {
            product: 'Socks',
            image: './assets/images/socks_blue.jpg',
            inStock: true,
            details: ['50% cotton', '30% wool', '20% polyester']
        }
    }
})

```

```html:index.html
          <div class="product-info">
            <h1>{{ product }}</h1>
            <p v-if="inStock">In Stock</p>
            <p v-else>Out of Stock</p>
            <ul>
              <li v-for="detail in details">{{ detail }}</li>
            </ul>
          </div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516328/f00882c1-bf89-74e7-9d92-a19dff1735d1.png)

配列の中にある属性を分けて表示する場合は以下のように:keyを指定する必要があります。
キーの指定により、アップデータされたりするオブジェクトの変更が有った場合に追跡することが可能になります。

```javascript:main.js
const app = Vue.createApp({
    data() {
        return {
            product: 'Socks',
            image: './assets/images/socks_blue.jpg',
            inStock: true,
            details: ['50% cotton', '30% wool', '20% polyester'],
            variants: [
                { id: 2234, color: 'green' },
                { id: 2235, color: 'blue' }
              ]
        }
    }
})

```

```html:index.html
          <div class="product-info">
            <h1>{{ product }}</h1>
            <p v-if="inStock">In Stock</p>
            <p v-else>Out of Stock</p>
            <ul>
              <li v-for="detail in details">{{ detail }}</li>
            </ul>
            <div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>
          </div>
```
detailsの場合キー項目みたいにキー項目が存在しない場合は、以下の書き方もできます。

```html:index.html
            <ul>
              <li v-for="(detail, index) in details" :key="index">{{ detail }}</li>
            </ul>
```

今回の課題はsizesをデータ配列オブジェクトとして、追加してv-forを利用し、レンダリングして見てください。

<details>
<summary>課題確認</summary><div>

```javascript:main.js
const app = Vue.createApp({
    data() {
        return {
            product: 'Socks',
            image: './assets/images/socks_blue.jpg',
            inStock: true,
            details: ['50% cotton', '30% wool', '20% polyester'],
            variants: [
                { id: 2234, color: 'green' },
                { id: 2235, color: 'blue' }
              ],
            // solution
            sizes: ['SS', 'S', 'M', 'L', 'XL', 'XXL']
        }
    }
})

```

```html:index.html
          <div class="product-info">
            <h1>{{ product }}</h1>
            <p v-if="inStock">In Stock</p>
            <p v-else>Out of Stock</p>
            <ul>
              <li v-for="(detail, index) in details" :key="index">{{ detail }}</li>
            </ul>
            <div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>
            <!-- solution -->
            <ul>
              <li v-for="size in sizes">{{ size }}</li>
            </ul>
          </div>
```
</div>
</details>