例えば、vue.js
でtableをsortする際に、tableに置く各要素を外部jsonから読み込みたい場合は以下のようにします。
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);
});
}
})
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/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;
あたりです。
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);
});
}
})