Vue.jsで配列や連想配列を出力する方法

2020年4月23日 2021年2月8日

mikaduki

laravemix

LaravelMixで自分はVue.jsを使ってます。同じようにやりたい場合は、前回の記事を参考にしていただければスムーズに作業できると思います。HTML上にVue.jsを読み込んでる人は、import vue from 'vue'が必要ないので消してください。

INDEX

Vue.jsのデータ定義

この表現が正しいのか正しくないのか自信がぶっちゃけありませんが、Vue.js内で取得、生成したデータを吐き出すことができます。言い換えると、dataオブジェクトにデータを追加して、dataオブジェクトのプロパティをHTMLに反映させることができます。dataオブジェクトのプロパティが変数なら、前の記事でやったようにすれば出ます。

ですので今日は配列だった場合にどう出すかをやりたいと思います。

というわけで配列作ります。

Vue.jsで配列の作成

名古屋市営地下鉄の桜通り線の駅を配列で表現してます。データオブジェクトの中にstationというプロパティを置いて、配列で定義していきます。

//vuetest.js

import Vue from 'vue'


const exp = new Vue({
    el: '#test',
    data: {
        station: [
            '名古屋',
            '国際センター',
            '丸の内',
            '久屋大通',
            '高岳',
            '車道',
            '今池',
            '桜山',
        ]
    }
});

普通に配列作るような感じ。簡単です。これの出力側を作って行きます。

Vue.jsで配列を1行ずつ出力する

さっき作った配列を、1行ずつ出力していきます。v-forディレクティブを使って出力しています。v-forは、このスコープ内のプロパティを参照できますが、後で説明します。

//test.blade.php
<html>
<head>
</head>
<body>
<div id="test">
    <ul>
        <li v-for="stations in station">
            @{{stations}}
        </li>
    </ul>

</div>
</body>
<script src="{{asset('js/vuetest.js')}}"></script>
</html>

配列を出力するには、このようにやります。配列のみを出力するケースってあまりないと思いますので、次に連想配列を出力していきたいと思います。

Vue.jsで連想配列を1行ずつ出力する

さっきの要領で連想配列を作って行きます。こんな感じです。

//vuetest.js

import Vue from 'vue'

const exp = new Vue({
    el: '#test',
    data: {
        station: [
            {sakuradouri: '名古屋'},
            {sakuradouri:'国際センター'},
            {sakuradouri: '丸の内'},
            {sakuradouri: '久屋大通'},
            {sakuradouri:'高岳'},
            {sakuradouri:'車道'},
            {sakuradouri:'今池'},
            {sakuradouri:'吹上'},
            {sakuradouri:'御器所'},
            {sakuradouri:'桜山'},
        ]

    }
});

連想配列をこのように作って、先ほどのように吐き出して結果を見ると

このように出力されるので意図しない形になります。なので、ループんとこでkeyを指定してやる必要があります。

<html>
<head>
</head>
<body>
<div id="test">
    <ul>
        <li v-for="stations in station">
            @{{stations.sakuradouri}}
        </li>
    </ul>

</div>
</body>
<script src="{{asset('js/vuetest.js')}}"></script>
</html>

sakuradouriとキーを指定してやると想定通りの出力になります。

これで、思った通りに出力できました。よし。

v-forで他のプロパティを参照する

v-for利用する時に説明を省いたところですが、Vue.jsのドキュメントにこう書いてあります。

v-for ブロック内では、親スコープのプロパティへの完全なアクセスを持っています。
https://jp.vuejs.org/v2/guide/list.html

こういうことができます。どういうことかというと、「data内にある他のプロパティはv-for内で参照可能だよ」って言ってると解釈しています。多分結論に違いはないと思ってます。

実行した方が分かりやすいと思いますので、コードを修正します。

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>

こんな感じで、denshaプロパティをv-forの中で参照できます。

今日はデータ出力をやったので、次は違うのをやりたいと思います。気分はYoutuberなので、チャンネルありませんが、チャンネル登録よろしくお願いします。