Toute personne venant par ce poste: I rece ntly avait quelque chose de similaire mais avec Laravel 5.1.
1) définir un composant (par exemple. Grid.vue peut être ressources/actifs/js/composants/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) Dans ressource /assets/js/yourcustomvue.js
import Grid from './components/Grid.vue';
new Vue({
el: '#results',
components: {Grid},
data: {}
});
Si vous remplacez le te mplate: nécessite avec du html, ça marche alors? – Adam
hy, pouvez-vous me donner un exemple pour cette – b4dQuetions