More than 3 years have passed since last update.

Vue.js のサンプル (JSON の取り込み）

Last updated at 2022-05-09Posted at 2018-08-16

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up