Vuejsのテンプレートで初めてループ処理を書くとき、いくつか引っ掛かったので備忘録としてまとめます。
v-forとv-ifを同時に使いたいとき
v-forとv-ifを同じ要素に使うな、と公式に書いていますので、同時に使いたいときはtemplate要素で囲んで対応。
<!-- 例 -->
<template v-for="d in data">
<div v-if="d.bool">{{ d.title }}</div>
</template>属性のつけ外し
たとえば5周目以降のリンクにはtarget=”_blank”をつける、 それ以外にはtarget属性自体をつけたくないとき。
三項演算子でnull を指定してやると解決しました。
<!-- 例 -->
<div v-for="(d,index) in data">
<a :href="d.link" :target="(4<index) ? '_blank' : null">{{ d.text }}</a>
</div>nullの代わりにfalseを指定するという記事もどこかで見かけたのですが、boolで指定する要素などでうまくいかないケースがあったので、私はnullを使っています。
ループ要素がゼロのときのv-if
ループ対象がないとき というケースがあり得たので、v-if=”data.length” と書いたところダメでした。
正しくは以下のように、 v-if=”data && data.lenght ” とするようです。
<!-- 例 -->
<ul v-if="data && data.length">
<li v-for="d in data"></li>
</ul>属性値を固定値＋変数にする
たとえば、id=`hoge-${d.id}` のように書きたいとき。
v-bind=””の値はJavaScriptと思って書いて差し支えないので、” ‘hoge-‘ + d.id “のように書けばOK。
<!-- 例 -->
<div v-for="(d,index) in data">
<p :id="'index-' + index">lorem</p>
</div>
