Vue.jsでjsonファイルからデータを取得する

Vue.jsでjsonを取得する方法を、axiosを使う場合とfetch()を使う場合でそれぞれ試してみます。

axiosを使う場合

まずはaxiosを使ってsample.jsonのようなjsonファイルを取得してみます。
まず必要なファイルを読み込みます。

<script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

次にjsonの内容を表示するHTMLを用意します。

<div id="app">
	<ol>
		<li v-for="person in vtuber">{{ person.name }}</li>
	</ol>
</div>

最後にJavaScriptです。
mounted内で取得処理を行っています。

var app = new Vue({
	el: '#app',
	data: {
		vtuber: []
	},
	mounted: function() {
		var self = this;
		axios
			.get('./sample.json')
			.then(function(response) {
				self.vtuber = response.data.vtuber;
			})
			.catch(function(error) {
				console.log('取得に失敗しました。', error);
			})
	}
})

jsonデータはresponse.data 内に入っています。
axiosを使う場合のデモページ

fetch()を使う場合

次にfetch()を使う場合です。
先ほどの読み込みからaxiosを外します。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

HTMLは先ほどと同じなので省略します。
JavaScriptもmounted内の取得処理以外は同じですが、先ほどはIE11も想定に入れていたので記述を少し変更しています。

var app = new Vue({
	el: '#app',
	data: {
		vtuber: []
	},
	mounted() {
		fetch('./sample.json')
			.then(response => {
				return response.json();
			})
			.then(json => {
				this.vtuber = json.vtuber;
			})
	}
})

fetch()はIEでは対応していないため、今回は想定から外しています。
fetch()を使う場合のデモページ