【Nuxt.js】Nuxt文法編：v-for

# 前置き

文法シリーズ第二弾
今回は定番のv-forです！

**文法は覚えましょう🍒**
ある程度の構文・単語は
覚える必要があります🌟
英文法・英単語を覚えないと
文が作れないのと同じです🎈🧸


**❓どんな時に使うか**
配列やオブジェクトを
listで描写させる時に使います。
https://note.com/aliz/n/nda7438249ca8

# v-for

https://qrunch.net/@rokujiro/entries/ylmWdFAZsaAtMTpq?ref=qrunch

**【解説】**
**・v-for="i in 6"**
　forといえば繰り返しですね。
　数字の6までの1つ1つをiとし
　それを繰り返しています。
**・:key**
　ここだと分かりにくいので
　後半に解説します。

```index.vue
<template>
 <div class="page">
   <ul>
     <li
       v-for="i in 6"
       :key="i"
     >
       {{ i }}
     </li>
   </ul>
 </div>
</template>
```

【表示】
<img width="495" alt="スクリーンショット 2020-06-01 13.21.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/fd0161eb-2721-f143-993a-9c862ca6df24.png">

# 配列の繰り返し

【解説】
**・v-for="item in items"**
　配列のitemsにある
　1つ1つのオブジェクトをitemと名付けます。
　in の代わりに of も使用できます🌟
**・:key (v-bind: key)**
　プロパティ= key
　1つ1つの要素がitemなので
　item.messageになります💡
　(itemの中のmessageプロパティ)
　⏬左がプロパティ: 右が値です！
　message: 'Foo',
　message: 'Bar',
　v-forには基本的に一意のkeyを指定します。
　要素を効率よく追跡し、
　パフォーマンス向上のためです。
　一意については
　オブジェクトのv-forで解説しています💡
　🍒keyによる再利用可能な要素の制御
　　https://note.com/aliz/n/n76280a0e3a02/edit
**・{{ item.message }}**
　itemsの1つ1つの要素をitemとしたので
　itemのmessageプロパティの値を表示
![Frame 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/38346552-366d-7fd4-c5b6-cca26f3fc0d3.png)

```index.vue
<template>
 <div class="page">
   <ul>
     <li<img width="665" alt="スクリーンショット 2020-06-01 10.48.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/3923d8d8-bbcd-4d8e-309d-5673130b1fea.png">

       v-for="item in items"
       :key="item.message"
     >
       {{ item.message }}
     </li>
   </ul>
 </div>
</template>

<script>
export default {
 data () {
   return {
     items: [
       { message: 'Foo' },
       { message: 'Bar' },
     ]
   }
 },
}
</script>
```

**【表示】**
<img width="665" alt="スクリーンショット 2020-06-01 10.48.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/f60b94fb-f5c7-153b-bc41-22c2a8a8005d.png">

# 配列番号のサポート

v-forは配列[ ]のインデックス(配列番号)を
第二引数としてサポートしています🌟
配列番号は0からスタートします！

```index.vue
<template>
 <div class="page">
   <ul>
     <li
       v-for="(item, index) in items"
       :key="item.message"
     >
       {{ parentMessage }} - {{ index }} - {{ item.message }}
     </li>
   </ul>
 </div>
</template>

<script>
export default {
 data () {
   return {
     parentMessage: 'Parent',
     items: [
       { message: 'Foo' },
       { message: 'Bar' },
     ]
   }
 },
}
</script>
```

**【表示】**
<img width="779" alt="スクリーンショット 2020-06-01 13.05.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/4c7cb62b-6f18-4d64-45f4-6e9ed1c5151e.png">

**【解説】**

v-forで繰り返すのはitem.messageのみ
そのため配列0,1の2つが表示されます。

# オブジェクトのv-for

配列だけでなくオブジェクトにも使えます🌟

```index.vue
<template>
 <div class="page">
   <ul>
     <li v-for="value in object">
       {{ value }}
     </li>
   </ul>
 </div>
</template>

<script>
export default {
 data () {
   return {
     object: {
       title: 'How to do lists in Vue',
       author: 'Jane Doe',
       publishedAt: '2016-04-10'
     }
   }
 },
}
</script>
```
**【表示】**

<img width="585" alt="スクリーンショット 2020-06-01 13.31.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/0c81c34b-8206-f0d7-f772-c06b3c12e620.png">

💡オブジェクトでも配列と同様に
　keyと配列番号が使用できます！

**【index.vue: keyを使用】**
バラバラのプロパティ名ですが、
これらのkeyをnameと名付けて使用しています🌱

```index.vue
<template>
 <div class="page">
   <ul>
     <li
      v-for="(value, name) in object"
      :key="name"
     >
       {{ name }} : {{ value }}
     </li>
   </ul>
 </div>
</template>

<script>
export default {
 data () {
   return {
     object: {
       title: 'How to do lists in Vue',
       author: 'Jane Doe',
       publishedAt: '2016-04-10'
     }
   }
 },
}
</script>
```
**【表示】**
<img width="576" alt="スクリーンショット 2020-06-01 13.36.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/3a0196b1-008d-4c14-dda1-f4a14966b3f1.png">

**【index.vue: 配列番号indexを使用】**

```index.vue
<template>
 <div class="page">
   <ul>
     <li
      v-for="(value, name, index) in object"
      :key="name"
     >
       {{ index }}. {{ name }} : {{ value }}
     </li>
   </ul>
 </div>
</template>

<script>
export default {
 data () {
   return {
     object: {
       title: 'How to do lists in Vue',
       author: 'Jane Doe',
       publishedAt: '2016-04-10'
     }
   }
 },
}
</script>
```

**【表示】**
<img width="517" alt="スクリーンショット 2020-06-01 13.44.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/5eefaaaa-526f-42f6-f158-c570065a4f49.png">

# :keyに使う値

❌非プリミティブ値
　オブジェクトや配列
⭕️プリミティブ値
　文字列や数字

**【解説】**
**・:key="index"**
　indexは配列番号のため非プリミティブ値
　配列は追加したり削除したりで
　対の値がズレることがあるので
　予期せぬ挙動になることがあります💥

**【❌index.vue: NG例】**

```index.vue
<template>
 <div class="page">
   <ul>
     <li
       v-for="(todo, index) in todos"
       :key="index"
       @click="deleteTodo(index)"
     >
       {{ todo.value }}
     </li>
   </ul>
 </div>
</template>

<script>
import Vue from 'vue'

export default {
 data () {
   return {
     todos: [
       { id: 1, value: '記事を書く' },
       { id: 2, value: '投稿する' },
       { id: 3, value: 'ツイートする' },
     ]
   }
 },
 methods: {
   deleteTodo (index) {
     this.$delete(this.todos, index)
   },
 },
}
</script>
```

**【解説】**
**・:key="todo.id"**
　idは文字列のためプリミティブ値
　todos配列の中のオブジェクト1つ1つがtodo
　そのtodoにあるプロパティidと
　valueを含めてidと名付けています🍒

**【補足】**
**・$delete**
　VueのグローバルAPI
　Vue.deleteを使用しています！
　そのためvueのimportが必要です🌟
　Nuxtで使う際には$deleteと書きます✍️

**【⭕️index.vue: OK例】**

```index.vue
<template>
 <div class="page">
   <ul>
     <li
       v-for="(todo, index) in todos"
       :key="todo.id"
       @click="deleteTodo(index)"
     >
       {{ todo.value }}
     </li>
   </ul>
 </div>
</template>

<script>
import Vue from 'vue'

export default {
 data () {
   return {
     todos: [
       { id: 1, value: '記事を書く' },
       { id: 2, value: '投稿する' },
       { id: 3, value: 'ツイートする' },
     ]
   }
 },
 methods: {
   deleteTodo (index) {
     this.$delete(this.todos, index)
   },
 },
}
</script>
```

**記事が公開したときにわかる様、
フォローをお願いします😀💕**
https://twitter.com/aLizlab