vue-tables-2 | 易学教程

Vue Tables 2 with Slots. How to pass data id to event handler?

阅读更多关于 Vue Tables 2 with Slots. How to pass data id to event handler?

问题 I'm using a slot to display a button in Vue Tables 2. How can I pass the id of the warehouse i.e. 123 or 456 to the edit() event handler? I've tried adding props (as this is what the docs show). But I haven't had any luck. I'm using Vue Tables 2 in a component. <template> <div> <h1>How to pass warehouse id to edit() method?</h1> <v-client-table :columns="columns" :data="warehouses" :options="options"> <span slot="actions" slot-scope="{ WarehousesMin }"> <button v-on:click="edit">Edit</button>

Linking a row in a table to a url

阅读更多关于 Linking a row in a table to a url

问题 I am working on a vue component that implements vue-tables-2. I have a working example here. What I am trying to do is link the edit href url to the entire row as opposed to only the edit cell. Using vanilla javascript, I tried using the mounted hook ( this.$el ) to access the virtual dom and wrap the row in an href and hide the edit column although, it feels like a bit of a hack. Any suggestions on how to accomplish this? <template> <div class="col-md-8 col-md-offset-2"> <div id="people"> <v

How to bind vue click event with vue tables 2 (JSX)?

阅读更多关于 How to bind vue click event with vue tables 2 (JSX)?

问题 Using https://github.com/matfish2/vue-tables-2, with Vue version 2, I can't seem to bind the click event on JSX (on templates->edit): var tableColumns = ['name', 'stock', 'sku', 'price', 'created_at'] var options = { compileTemplates: true, highlightMatches: true, pagination: { dropdown: true, chunk: 10 }, filterByColumn: true, texts: { filter: 'Search:' }, datepickerOptions: { showDropdowns: true }, templates: { edit: function (h, row) { return <button v-on:click={this.showItem(row.id)}

Reload Data of vue-tables-2 (Vuex)

阅读更多关于 Reload Data of vue-tables-2 (Vuex)

问题 Module: https://github.com/matfish2/vue-tables-2 I'm creating a CRUD app. How can I reload the data fetched via Ajax call in vue-tables-2? I wanted to reload the table after an update statement is executed somewhere in my app. Vue-tables is using vuex in my setup. <v-server-table name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options"> </v-server-table> EDIT: Added Javascript code of the table for data properties. export default { data() { return { columns: ['ID

Vue Tables 2 - Custom filters

阅读更多关于 Vue Tables 2 - Custom filters

问题 I'm trying to use this https://github.com/matfish2/vue-tables-2 with Vue 2.1.8. And it's working perfectly BUT I need to use custom filters to format some fields based on their value etc. In options I have this: customFilters: [ { name:'count', callback: function(row, query) { console.log('see me?'); // Not firing this return row.count[0] == query; } } ] In the docs it says I have to do this: Using the event bus: Event.$emit('vue-tables.filter::count', query); But I have no idea where to put

How to use a Vue.js Plugin inside a custom Component?

阅读更多关于 How to use a Vue.js Plugin inside a custom Component?

问题 I need to output a table and it's content which can be updated via Ajax. So I'm planning to use vue-tables-2 (https://github.com/matfish2/vue-tables-2) which is a Vue.js plugin. Using the Laravel way, I'm writing a Vue.js custom component, so how can I use the vue-tables-2 plugin inside my component? Here an example of how to use the plugin https://jsfiddle.net/matfish2/jfa5t4sm/ . Unfortunately in the example is not wrapping the plugin inside a component. 回答1: You have two ways available to

Vue Tables 2 - Custom filters

阅读更多关于 Vue Tables 2 - Custom filters

I'm trying to use this https://github.com/matfish2/vue-tables-2 with Vue 2.1.8. And it's working perfectly BUT I need to use custom filters to format some fields based on their value etc. In options I have this: customFilters: [ { name:'count', callback: function(row, query) { console.log('see me?'); // Not firing this return row.count[0] == query; } } ] In the docs it says I have to do this: Using the event bus: Event.$emit('vue-tables.filter::count', query); But I have no idea where to put this? I tried many places. For example in my axios success callback but nothing. I guess this is very