I am trying to discover this matfish2/vue-tables-2 component, basic usage is fine but trying to read among the holes in the documentation is tricky... few examples on Google..
In the doc , it's stated :
Events
Using Custom Events (For child-parent communication):
<v-server-table :columns="columns" url="/getData" @loaded="onLoaded"></v-server-table>
Using the event bus:
Event.$on('vue-tables.loaded', function (data) {
// Do something
});
So I tried it in my UsersPage.vue
<template>
<div id="users" class="container">
<div class='users'>
<v-client-table :data='tableData' :columns='columns' :options='options' @loaded="onLoaded"></v-client-table>
</div>
</div>
</template>
<script>
import { Event } from 'vue-tables-2'
export default {
name: 'UsersPage',
data () {
return {
columns: ['id', 'firstName', 'lastName', 'email', 'birthday'],
tableData: [ ... ],
options: {
perPage: 5,
perPageValues: [ 5, 10, 15, 20 ]
}
}
},
ready: function () {
Event.$on('vue-tables.loaded', (data) => {
console.log('Loaded...')
})
}
}
</script>
But It's not working ... where am I wrong ? How to check these events ? thanks for feedback
UPDATE
I ried to modify my UsersPage script as following, no errors, but also no console log ...
<script>
import Vue from 'vue'
import { Event } from 'vue-tables-2'
Vue.use(Event)
export default {
name: 'UsersPage',
data () {
return {
columns: ['id', 'firstName', 'lastName', 'email', 'birthday'],
tableData: [ ... ],
options: {
perPage: 5,
perPageValues: [ 5, 10, 15, 20 ]
}
}
},
created () {
Event.$on('vue-tables.loaded', function (data) {
console.log('Loaded...')
console.log('My event has been triggered', data)
})
},
methods: {
onLoaded ($event) {
console.log('My event caught in global event bus', $event)
}
}
}
</script>