【vue】 v-forで同じ要素を複数表示する
vueでは、同じ構造の要素を並べたい場合にv-forを使うことで並べることができます。
forの書き方
for-in構文が使えますが、挙動が少し異なります。
Vueでは、HTMLに書く方のfor-inとfor-ofは全く同じ挙動になります。
配列の場合
<div v-for="変数 in 配列"></div>のように書きます。格納した変数は普通に使えますが、vueの値と被ると混乱のもとなのでかぶらないように注意しましょう。
const app = Vue.createApp({
data() {
return {
values: [1, 10, "foo", "bar"]
}
}
});
<div v-for="v in values" class="value-wrapper">
{{ v }}
</div>
実際にv-forすると、内側が複製されるのではなく、forした要素自体が複製されます。
また、forする要素自身に、forで作った変数を使うことができます。
<div v-for="v in values" :name="v">
{{ v }}
</div>
See the Pen vue1 for1 by Totori (@souki202) on CodePen.
ここで、Javascriptのfor-inと、vueのfor-inは少し異なります。Javascriptのfor-inはインデックスの番号が入りましたが、Vueのfor-inは値が入ります。
また、(value, index) in arrayのように書くと、値とインデックスを同時に取り出せます。 (1個目に値、2個目にインデックスです)
<div v-for="(v, i) in values">
{{ v }}
<a :href="v">{{ i }}</a>
</div>
See the Pen Untitled by Totori (@souki202) on CodePen.
括弧はなくても動きますが、あったほうがおそらくわかりやすいです。v-for="v, i in values"
どちらでも良いと思います。
連想配列の場合
(value, key) in dictのように書きます。
const app = Vue.createApp({
data() {
return {
dict: {
a: 10,
b: 20,
c: 30,
}
}
}
});
<div v-for="value, key in dict">
{{ key }}, {{ value }}
</div>
See the Pen vue1 for2 by Totori (@souki202) on CodePen.
こちらもvalueが先で、keyが後に来ることを忘れないようにしましょう。
キーは省略できます。
<div v-for="value in dict">
{{ value }}
</div>
<div v-for="value, key in dict" :key="key"></div>のように、:key="key"を付けることがよくあります。
これは、inputのv-modelなどでひも付きが外れないようにするためのものです。
値の追加削除時の挙動
値に変更があれば自動的に反映されます。実験してみましょう。
See the Pen vue1 for3 by Totori (@souki202) on CodePen.
ボタンを押すと, 配列に要素が追加される機能を実装しました。ちゃんと反映されています。
this.values = [];という書き方は、Vue2まではリアクティブ性が失われてしまう方法でした。
Vue3では配列に配列を代入することが可能になっています。 (連想配列も同様)
Vue2の場合、this.values.splice(0);とする必要があります。
一定回数ループ
for (let i = 0; i < 10; i++) {
// ...
}
のような挙動をするには、次のように書きます。
<div v-for="i in 10">
{{ i }}
</div>
変数 in 回数となっています. ここで, iは1から開始するので、この場合は1~10が表示されます。
まとめ
同じ要素を描画するには、<div v-for="value, key in array">...</div>のように書きます。
forが使えるとは言え、HTMLにロジックを書くことは通常ありません。そのため、while文はありません。ロジックのために使うのではなく、あくまで同じものを描画するために使いましょう。
書き方が内容が似ているv-ifも一緒に見ておきましょう。
