vue.js+axiosでjsonを読み込む

例えば、`vue.js`でtableをsortする際に、tableに置く各要素を外部jsonから読み込みたい場合は以下のようにします。

```js:main.js
import Vue from 'vue'
import axios from 'axios'

Vue.component('demo-grid', {
	template: '#grid-template',
	props: {
		data: Array,
		columns: Array,
		filterKey: String
	},
	data: function () {
		var sortOrders = {}
		this.columns.forEach(function (key) {
			sortOrders[key] = 1
		})
		return {
			sortKey: '',
			sortOrders: sortOrders
		}
	},
	computed: {
		filteredData: function () {
			var sortKey = this.sortKey
			var filterKey = this.filterKey && this.filterKey.toLowerCase()
			var order = this.sortOrders[sortKey] || 1
			var data = this.data
			if (filterKey) {
				data = data.filter(function (row) {
					return Object.keys(row).some(function (key) {
						return String(row[key]).toLowerCase().indexOf(filterKey) > -1
					})
				})
			}
			if (sortKey) {
				data = data.slice().sort(function (a, b) {
					a = a[sortKey]
					b = b[sortKey]
					return (a === b ? 0 : a > b ? 1 : -1) * order
				})
			}
			return data
		}
	},
	filters: {
		capitalize: function (str) {
			return str.charAt(0).toUpperCase() + str.slice(1)
		}
	},
	methods: {
		sortBy: function (key) {
			this.sortKey = key
			this.sortOrders[key] = this.sortOrders[key] * -1
		}
	}
})

var demo = new Vue({
	el: '#demo',
	data: {
		searchQuery: '',
		gridColumns: ['id','name', 'name_jp','cp','hp','attack','defense','type1','type2'],
		gridData: []
	},
	beforeCreate: function () {
		axios.get('/json/pokemon.json')
			.then(function (response) {
				demo.gridData = response.data;
			})
			.catch(function (error) {
				console.log(error);
			});
	}
})
```

```html:index.html
	<script type="text/x-template" id="grid-template">
	  <table>
	    <thead>
	      <tr>
	        <th v-for="key in columns"
	          @click="sortBy(key)"
	          :class="{ active: sortKey == key }">
	          {{ key | capitalize }}
	          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
	          </span>
	        </th>
	      </tr>
	    </thead>
	    <tbody>
	      <tr v-for="entry in filteredData">
	        <td v-for="key in columns">
	          {{entry[key]}}
	        </td>
	      </tr>
	    </tbody>
	  </table>
	</script>
	
	<div id="demo">
	  <!--
	  <form id="search">
	    Search <input name="query" v-model="searchQuery">
	  </form>
	  -->
	  <demo-grid
	    :data="gridData"
	    :columns="gridColumns"
	    :filter-key="searchQuery">
	  </demo-grid>
	</div>
```

```json:/json/pokemon.json
[
  {
    "id": "382",
    "name": "Kyogre",
    "name_jp": "カイオーガ",
    "cp": "4074",
    "hp": "154",
    "attack": "270",
    "defense": "251",
    "stamina": "182",
    "type1": "み ず",
    "type2": "",
    "url": "http://www.pokemon.jp/zukan/detail/382.html",
    "img": "/img/382.png"
  }
]
```

ほとんどが公式ドキュメントにある通りですが(特にsort処理)、ポイントは`beforeCreate:`, `demo.gridData = response.data;`あたりです。

```js
var demo = new Vue({
	el: '#demo',
	data: {
		searchQuery: '',
		gridColumns: ['id','name', 'name_jp','cp','hp','attack','defense','type1','type2'],
		gridData: []
	},
	beforeCreate: function () {
		axios.get('/json/pokemon.json')
			.then(function (response) {
				demo.gridData = response.data;
			})
			.catch(function (error) {
				console.log(error);
			});
	}
})
```

参考 : https://jp.vuejs.org/v2/examples/grid-component.html