前置き
文法シリーズ第二弾
今回は定番のv-forです！
文法は覚えましょう🍒
ある程度の構文・単語は
覚える必要があります🌟
英文法・英単語を覚えないと
文が作れないのと同じです🎈🧸
どんな時に使うの？
配列やオブジェクトを
listで描写させる時に使います。
【Nuxt.js】ちょ〜簡単！TODOリスト
v-for
簡単な使い方
解説
- v-for="i in 6"
forといえば繰り返しですね。
数字の6までの1つ1つをiとし
それを繰り返しています。 - :key
ここだと分かりにくいので
後半に解説します。
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <div class="page"> <ul> <li v-for="i in 6" :key="i" > {{ i }} </li> </ul> </div> </template> |
配列の繰り返し
解説
- 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による再利用可能な要素の制御 - {{ item.message }}
itemsの1つ1つの要素をitemとしたので
itemのmessageプロパティの値を表示
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> |
配列番号のサポート
v-forは配列[ ]のインデックス(配列番号)を
第二引数としてサポートしています🌟
配列番号は0からスタートします！
解説
v-forで繰り返すのはitem.messageのみ
そのため配列0,1の2つが表示されます。
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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> |
オブジェクトのv-for
簡単な使い方
v-forは配列だけでなくオブジェクトにも使えます🌟
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> |
:keyを使用
オブジェクトでも配列と同様に
keyと配列番号が使用できます！
解説
バラバラのプロパティ名ですが、
これらのkeyをnameと名付けて使用しています🌱
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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> |
配列番号indexを使用
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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> |
:keyに使う値
非プリミティブ値(オブジェクトや配列)
プリミティブ値(文字列や数字)
NG例
解説
:key="index"
indexは配列番号のため非プリミティブ値
配列は追加したり削除したりで
対の値がズレることがあるので
予期せぬ挙動になることがあります💥
が！
いい感じのkeyがない時は使うこともあります💡
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<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> |
OK例
解説
:key="todo.id"
idは文字列のためプリミティブ値
todos配列の中のオブジェクト1つ1つがtodo
そのtodoにあるプロパティidと
valueを含めてidと名付けています🍒
コード
) pages
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<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> |
$delete
VueのグローバルAPI
Vue.deleteを使用しています！
そのためvueのimportが必要です🌟
Nuxtで使う際には$deleteと書きます✍️