CDN版Vue.js + axios でさくっとAjaxしてみる

Posted: 2018.12.14 / Category: javascript / Tag: Vue

Vue.jsはBabelなどを導入しなくても、scriptタグで読み込んで、わりと気軽に扱えるところも売りだったりします。
今回はVue.jsとaxiosを使用して、簡単なjsonファイルを読み込んで表示するということをしてみます。

Sponsored Link

Vue.js v2.5.21
axios v0.18.0
を使用します。

index.html

ベースとなるhtmlです。
https://cdn.jsdelivr.net からVue.jsとaxiosを読み込みます。
IEに対応するためにPromiseも読み込んでおきます。
メインとなるソースコードはsrc.jsに書きます。
後に作成するpriceコンポーネントを配置します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Vue.js Ajax</title>
</head>
<body>
<div id="app">
	<price></price>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> 
<script src="src.js"></script>
<script>
new Vue({
	el: '#app'
});
</script>
</body>
</html>

データの確認

データはサーバーから吐き出すものですが、今回は静的なjsonファイルを作成します。
価格表のようなものを想定してます。

data.json

[
	{
		"title": "商品1",
		"price": 2000
	},{
		"title": "商品2",
		"price": 2600
	},{
		"title": "商品3",
		"price": 3400
	}
]

Vueのコード

メインとなるVueのソースコードです。
axiosで読み込んだデータをitemsデータに入れて、template部分で表示しているだけですね。

src.js

Vue.component('price', {
	data: function () {
		return {
			items: []
		}
	},
	mounted: function ()  {
		var self = this;
		axios
			.get('data.json')
				.then(function (res) {
					self.items = res.data;
				});
	},
	template: '<table>' +
			'<tr v-for="item in items">' +
			'<td>{{ item.title }}</td><td>{{ item.price }}</td>' +
			'</tr></table>'
});

セレクトボックスでデータを切り替える

data.jsonの内容をテーブルで表示することができました。
ただこれだけですとjQueryの方が簡潔に書けるのではないかなと思いますので、セレクトボックスで読み込むデータを切り替えるということをやってみます。

読み込むデータはdata-a.jsondata-b.jsondata-c.jsonという名前で3つ用意します。

src.js

Vue.component('price', {
	data: function () {
		return {
			items: [],
			selected: 'data-a',
			options: [
				{ text: '価格A', value: 'data-a' },
				{ text: '価格B', value: 'data-b' },
				{ text: '価格C', value: 'data-c' }
			]
		}
	},
	mounted: function ()  {
		this.load();
	},
	methods: {
		load: function () {
			var self = this;
			axios
				.get(this.selected + '.json')
					.then(function (res) {
						self.items = res.data;
					});
		}
	},
	template: '<div><select v-model="selected" v-on:change="load">' +
				'<option v-for="option in options" v-bind:value="option.value">' +
				'{{ option.text }}' +
				'</option></select>' +
				'<table>' +
				'<tr v-for="item in items">' +
				'<td>{{ item.title }}</td><td>{{ item.price }}</td>' +
				'</tr></table></div>'
});

セレクトボックスに表示するデータとしてoptions、選択されたデータはselectedに入れてます。
後はaxiosで読み込む部分をmethodsに移して、mountedとセレクトボックのv-on:changeで実行するようにすれば完成です。

IEをサポートしなければBabelを導入しなくても、もっといい感じに、そして気軽に書けると思いますが、しばらくはこんな感じですかね。
ということで以上です。