前置き
文法シリーズ第二弾
今回は定番のv-forです！
文法は覚えましょう🍒
ある程度の構文・単語は
覚える必要があります🌟
英文法・英単語を覚えないと
文が作れないのと同じです🎈🧸
❓どんな時に使うか
配列やオブジェクトを
listで描写させる時に使います。
https://note.com/aliz/n/nda7438249ca8
v-for
【解説】
・v-for="i in 6"
forといえば繰り返しですね。
数字の6までの1つ1つをiとし
それを繰り返しています。
・:key
ここだと分かりにくいので
後半に解説します。
<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による再利用可能な要素の制御
https://note.com/aliz/n/n76280a0e3a02/edit
・{{ item.message }}
itemsの1つ1つの要素をitemとしたので
itemのmessageプロパティの値を表示
<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>
【表示】
配列番号のサポート
v-forは配列[ ]のインデックス(配列番号)を
第二引数としてサポートしています🌟
配列番号は0からスタートします！
<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で繰り返すのはitem.messageのみ
そのため配列0,1の2つが表示されます。
オブジェクトのv-for
配列だけでなくオブジェクトにも使えます🌟
<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と配列番号が使用できます！
【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>
【表示】
【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>
【表示】
: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>
記事が公開したときにわかる様、
フォローをお願いします😀💕
https://twitter.com/aLizlab