Vueと共通

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

前置き

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

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

どんな時に使うの?

配列やオブジェクトを
listで描写させる時に使います。
【Nuxt.js】ちょ〜簡単!TODOリスト


v-for

簡単な使い方

解説

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

コード

) pages


配列の繰り返し

解説

  • 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


配列番号のサポート

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

解説

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

コード

) pages


オブジェクトのv-for

簡単な使い方

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

コード

) pages

:keyを使用

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

解説

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

コード

) pages

配列番号indexを使用

コード

) pages

:keyに使う値

非プリミティブ値(オブジェクトや配列)

プリミティブ値(文字列や数字)

NG例

解説

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

が!
いい感じのkeyがない時は使うこともあります💡

コード

) pages

OK例

解説

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

コード

) pages

$delete

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

-Vueと共通
-,

© 2024 aLiz Nuxt