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を導入しなくても、もっといい感じに、そして気軽に書けると思いますが、しばらくはこんな感じですかね。
ということで以上です。



