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