見出し画像

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

🎈 この記事はWPへ移行しました
【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>

【表示】

スクリーンショット 2020-06-01 13.21.56

# 配列の繰り返し

【解説】
・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プロパティの値を表示

画像7

【index.vue】

<template>
 <div class="page">
   <ul>
     <li
       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>

【表示】

スクリーンショット 2020-06-01 10.48.48

# 配列番号のサポート

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>

【表示】

スクリーンショット 2020-06-01 13.05.07

【解説】

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>

【表示】

スクリーンショット 2020-06-01 13.31.31

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

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

<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>

【表示】

スクリーンショット 2020-06-01 13.36.37

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

<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>

【表示】

スクリーンショット 2020-06-01 13.44.42

# :keyに使う値

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

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

【❌index.vue: NG例】

<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例】

<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>

# 次回予告

【Nuxt.js】firebase基礎編(Auth版):Twitterログインをできるようにしよう
6/5(金)公開です🌟

記事が公開したときにわかる様、
フォローをお願いします😀💕

🎈 この記事はWPへ移行しました
【Nuxt.js】Nuxt文法編:v-for

この記事が気に入ったらサポートをしてみませんか?