<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubuserco

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

How to access an instance of a particular vuetable? about vue-table HOT 6 CLOSED

ratiw commented on May 28, 2024

How to access an instance of a particular vuetable?

from vue-table.

Comments (6)

ratiw commented on May 28, 2024

@thomasdola This is interesting! I've never thought of using it like this. :)
Let me think about it and I'll let you know.

from vue-table.

ratiw commented on May 28, 2024

@thomasdola
I'm not sure how you set up your code, but if it was me I would do something like this.
I haven't tested this, but the idea is there.

    <vuetable v-ref:regionsTable
        api-url="/api/regions"
        //...
        :item-actions="regionActions"
    ></vuetable>

    <vuetable v-ref:districtsTable
        api-url="/api/districts"
        //...
        :item-actions="districtActions"
        :append-params="districtParams"
    ></vuetable>

    <vuetable v-ref:locationsTable
        api-url="api/locations"
        //...
        :item-actions="locationActions"
        :append-params="locationParams"
    ></vuetable>

new Vue({
    el: '#app',
    data: {
        regionParams: [],
        districtParams: [],
        locationParams: [],
        regionActions: [
            { name: 'select-region', label: '', icon: '...', class: '...' }
        ],
        districtActions: [
            { name: 'select-district', label: '', icon: '...', class: '...' }
        ],
        locationActions: [
        ]
    },
    events: {
        'vuetable:action': function(action, data) {
            if (action == 'select-region') {
                this.districtParams = [
                    'filter=' + data.region
                ]
                this.$nextTick(function() {
                    this.$refs.districtsTable.$broadcast('vuetable:refresh')
                })
            }
            else if (action == 'select-district') {
                this.locationParams = [
                    'filter=' + data.district
                ]
                this.$nextTick(function() {
                    this.$refs.locationsTable.$broadcast('vuetable:refresh')
                })
            }
        },
    }
})

Please note that I'm not quite sure whether to use $broadcast or $dispatch here. If $broadcast does not work, try $dispatch instead and see how it goes.

from vue-table.