jsonを使ったVue.jsでの配列表示

Vueの単純な配列表示は簡単にできたので、jsonファイルからデータを抽出して配列表示させる勉強をしました。

---

axiosを使う

Vueでjsonファイルからデータを取得するときはaxiosを使うといいらしい

【参考】
axios を利用した API の使用 — Vue.js

＊js

import Vue from 'vue';
import axios from 'axios';
require('es6-promise').polyfill();

var news = new Vue({
    el: '#test',
    data: {
        datalists:[],
    },
    created() {
        axios.get('/assets/json/test.json')
        .then(response => {
            this.datalists = response.data;
        })
        .catch(error => {
              console.log(error);
        });
    },
});

＊html

<div id="test">
    <ul>
        <li v-for="data in datalists">
             名前：{{data.name}}　年齢：{{data.age}}</p>
        </li>
    </ul>
</div>

＊ブラウザ

名前：たなか　年齢：22
名前：すずき　年齢：40
名前：いとう　年齢：10

公式ではmountedを使っているが、データを設定するだけなので、createdを使用した。

【参考】
Vuejs APIアクセスはcreatedとmountedのどちらで行う？

jsonのデータはresponseというオブジェクトの中のdataプロパティにある。

→オブジェクト・プロパティについて【参考】
JSのオブジェクト、プロパティ、メソッドとか言葉のことなど勉強その①

jsonのデータをVueのdataプロパティで定義したdatalistsにデータを格納。

データの取得に成功した場合の処理は、thenでつなげる。
取得に失敗したときは、catchを使用して呼び出す。

thenやcatchはpromiseオブジェクトに用意されてるメソッド。

axiosは非同期処理でpromiseを返すらしい。

【参照】
JavaScript Promiseの本 Proimise の活用 – chatbox blog

IEはprimiseに対応してない

IEではこのprimiseは対応してなくエラーが出たので、「es6-promise」をnpmで読み込んで解決しました。

require('es6-promise').polyfill();

→ es6-promise - npm

表示数の制限

表示する数を制限するときは算出プロパティのcomputed等を使えばできるみたい。
今回はデータの最新2つを表示する設定にした。

＊js

computed: {
    filterlist: function() {
        return this.datalists.slice(0, 2);
    }
}

＊html

<div id="test">
    <ul>
        <li v-for="data in filterlist">
            名前：{{data.name}}　年齢：{{data.age}}</p>
        </li>
    </ul>
</div>

＊ブラウザ

名前：たなか　年齢：22
名前：すずき　年齢：40

【参考】
Vue.js 2.xのフィルタについて調べてみた

---

以上、普段使える知識が身についたと思いました。