index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>vue.js ex02</title>
</head>
<body>
<div id="app">
<table>
<tr v-for="(value,key) in cities">
<td> {{key}} </td>
<td> {{value.name}} </td>
<td> {{value.population}} </td>
<td> {{value.date_mod}} </td>
</tr>
</table>
</div>
<script src="ex02.js"></script>
<p />
Aug/16/2018<p />
</body>
</html>
ex02.js
// ---------------------------------------------------------------
// ex02.js
//
// Aug/18/2018
//
// ---------------------------------------------------------------
var app = new Vue({
el: '#app',
data: {
cities: []
},
methods: {
async getCities() {
var url = 'http://localhost/tmp/json/cities.json'
await axios.get(url).then(x => { this.cities = x.data })
}
},
mounted() {
this.getCities()
}
})
// ---------------------------------------------------------------
サーバーに置いた JSON
cities.json
{
"t0921": {
"name": "宇都宮",
"population": 68714,
"date_mod": "1950-9-24"
},
"t0922": {
"name": "小山",
"population": 29157,
"date_mod": "1950-3-15"
},
"t0923": {
"name": "佐野",
"population": 65741,
"date_mod": "1950-10-7"
},
"t0924": {
"name": "足利",
"population": 38164,
"date_mod": "1950-6-22"
},
"t0925": {
"name": "日光",
"population": 49675,
"date_mod": "1950-8-28"
},
"t0926": {
"name": "下野",
"population": 65813,
"date_mod": "1950-9-12"
}
}
次のバージョンで確認しました。
Vue.js v2.6.14
axios v0.27.2