Vue.jsでループ処理をしたい時、配列や連想配列のデータをv-forでどう出力するかって意外とハマりがちですよね。
この記事では、実際に v-for を使って：
- 普通の配列を1行ずつ表示する方法
- 連想配列をループして特定のキーだけを出力する方法
- 親スコープのプロパティをどう参照できるか
あたりを、Laravel MixでVueを使ってる前提でざっくり書いてます。
Vue.jsのデータ定義
この表現が正しいのか正しくないのか自信がぶっちゃけありませんが、Vue.js内で取得、生成したデータを吐き出すことができます。言い換えると、dataオブジェクトにデータを追加して、dataオブジェクトのプロパティをHTMLに反映させることができます。dataオブジェクトのプロパティが変数なら、前の記事でやったようにすれば出ます。
ですので今日は配列だった場合にどう出すかをやりたいと思います。
というわけで配列作ります。
配列を定義して、1行ずつ出力する
名古屋市営地下鉄の桜通り線の駅を配列で表現してます。データオブジェクトの中にstationというプロパティを置いて、配列で定義していきます。
//vuetest.js
import Vue from 'vue'
const exp = new Vue({
el: '#test',
data: {
station: [
'名古屋',
'国際センター',
'丸の内',
'久屋大通',
'高岳',
'車道',
'今池',
'桜山',
]
}
});//test.blade.php（Brade前提）
<div id="test">
<ul>
<li v-for="stations in station">
@{{stations}}
</li>
</ul>
</div>
<script src="{{ asset('js/vuetest.js') }}"></script>配列を出力するには、このようにやります。配列のみを出力するケースってあまりないと思いますので、次に連想配列を出力していきたいと思います。
💡補足：
v-for="item in items"の形で、配列をループ処理できます。itemはループ内の各要素です。
連想配列を出力する
次は、配列の中身をオブジェクトにして、キー指定で出力してみます。こうしないと @{{stations}} だと [object Object] になる。
//vuetest.js
import Vue from 'vue'
const exp = new Vue({
el: '#test',
data: {
station: [
{sakuradouri: '名古屋'},
{sakuradouri:'国際センター'},
{sakuradouri: '丸の内'},
{sakuradouri: '久屋大通'},
{sakuradouri:'高岳'},
{sakuradouri:'車道'},
{sakuradouri:'今池'},
{sakuradouri:'吹上'},
{sakuradouri:'御器所'},
{sakuradouri:'桜山'},
]
}
});
<div id="test">
<ul>
<li v-for="stations in station">
@{{ stations.sakuradouri }}
</li>
</ul>
</div>連想配列をこのように作って、先ほどのように吐き出して結果を見ると
これで、思った通りに出力できました。よし。
v-forで他のプロパティを参照する
v-forの中でも、data に定義してある他のプロパティを参照できます。公式ドキュメントにも書いてあります：
https://jp.vuejs.org/v2/guide/list.html
v-forブロック内では、親スコープのプロパティへの完全なアクセスを持っています。
例として、路線名を出す densha プロパティを追加してみます。
実行した方が分かりやすいと思いますので、コードを修正します。
import Vue from 'vue'
const exp = new Vue({
el: '#test',
data: {
densha: '名古屋市営地下鉄桜通線',
station: [
{sakuradouri: '名古屋'},
{sakuradouri:'国際センター'},
{sakuradouri: '丸の内'},
{sakuradouri: '久屋大通'},
{sakuradouri:'高岳'},
{sakuradouri:'車道'},
{sakuradouri:'今池'},
{sakuradouri:'吹上'},
{sakuradouri:'御器所'},
{sakuradouri:'桜山'},
]
}
});
denshaというプロパティを追加しました。特に電車も駅も好きではありませんが、思いついたので書きました。
<html>
<head>
</head>
<body>
<div id="test">
<ul>
<li v-for="stations in station">
@{{densha}} - @{{stations.sakuradouri}}
</li>
</ul>
</div>
</body>
<script src="{{asset('js/vuetest.js')}}"></script>
</html>
まとめ
- 配列はそのまま
v-for="item in items"で出せる - 連想配列は
item.keyでアクセスしないと[object Object]になる - v-for内で他のdataプロパティも参照できる
ちゃんと理解してないと詰まりがち。
おすすめ記事
コメントを残す