フレームワークで非同期の通信ができれば大体のウェブページは作れると筆者は思っています。
そこでVue.jsでJSONを非同期で読み込む実装をやってみました。
Vue.jsの本家でもaxios.jsを薦めていたのでそのまま使った例です。
HTML
<div class="demo_code" id="app"> <li v-for="res in results"> ID={{ res.id }}<br> name={{ res.name }}<br> check={{ res.check }} </li> </div>
JavaScript
const vm = new Vue({ el: '#app', data: { results:[] }, mounted() { axios.get("/js/sample/json/test.json") .then(response => { this.results = response.data console.log(response.data) }) }, computed: { processedPosts() { let posts = this.results; } } });
上記の記述の通りJSONを読み込むと以下のように表示されます。
実行結果
name={{ res.name }}
check={{ res.check }}
呼ばれているサンプルのJSONの中身はこんな感じです。
[ { "id": 0, "name": "Ajax", "check": true }, { "id": 1, "name": "Hello", "check": false }, { "id": 2, "name": "World", "check": true }, { "id": 3, "name": "vue", "check": true }, { "id": 4, "name": "JS", "check": true } ]