Любой проходящий через этот пост: I Rece ntly имел что-то подобное, но с Laravel 5.1.
1) определить компонент (например. Grid.vue может быть ресурсов/активы/JS/компоненты/Grid.vue)
<template id="grid">
<table class="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 data
| filterBy filterKey
| orderBy rank sortOrders[rank]">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
</table>
<script>
// register the grid component
export default {
template: '#grid',
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function() {
var sortOrders = {};
this.columns.forEach(function (key) {
sortOrders[key] = 1
});
return {
sortKey: '',
sortOrders: sortOrders
}
},
methods: {
sortBy: function (key) {
this.sortKey = key;
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
};
</script>
2) В ресурсе /assets/js/yourcustomvue.js
import Grid from './components/Grid.vue';
new Vue({
el: '#results',
components: {Grid},
data: {}
});
Если вы замените te mplate: требуется с некоторым html, он работает тогда? – Adam
Не могли бы вы привести пример для этого – b4dQuetions