VueTable 2 $refs object empty in mounted hook

Question

I've read several posts where the $refs property of the vue instance is only available in the mounted hook of Vue.js

I have a custom event listener set up in my vue component that listens to a change of date in an input field. Once this happens I am changing the query parameter of the date to fetch a new set of results from my API.

My problem is that I cannot run the refresh() method with my new query parameter.

Here's my component

<template>
    <vuetable
        :fields="table.fields"
        :apiUrl="table.url"
        :append-params="urlParams"
    ></vuetable>
</template>

<script>
    import { eventBus } from '../app.js';
    import Vuetable from 'vuetable-2';
    import moment from 'moment';

    export default {
        data: function() {
            return {
                urlParams: {
                    d: moment().add(1, 'd')._d, // date selected
                    //p: null, // product selected
                },
                lineItems: '',
                table: {
                    url: '/home/bakery/lineitems/', // by default we need tomorrows orders
                    showTable: false,
                    fields: [
                        { name: 'order_id', title: 'Order#' }, 
                        { name: 'customer_name', title: 'Customer' }, 
                        { name: 'qty', title: 'QTY' }, 
                        { name: 'product_name', title: 'Product' }, 
                        { name: 'variation', title: 'Variations', callback: 'formatArray' }, 
                        { name: 'collection_time', title: 'Timeslot' }, 
                        { name: 'store', title: 'Transport' }, 
                        { name: 'order_id', title: 'Actions' }
                    ],
                },
            }
        },
        components: {
            'vuetable': Vuetable,
        },
        methods: {
            filterByProduct: function(val, ev) {
                this.selectedProduct = val;
                this.table.url = '/home/bakery/lineitems?d=' + moment(data) + '&p=' + val;
            },
            formatArray: function(val) {
                var valArray = JSON.parse(val); // convert API string to array

                var text = '<ul>'; 
                for(var i in valArray) {
                    text += '<li>' + valArray[i].key + ': ' + valArray[i].value + '</li>';
                }
                text += '</ul>';

                return text;
            },
        },
        mounted: function() {
            //console.log(this.$refs);
            eventBus.$on('dateSelected', (data) => {
                self = this;
                self.urlParams.d = moment(data);
                Vue.nextTick( function() {
                    self.$refs.vuetable.refresh();
                });
            });
            eventBus.$on('filter-set', (data) => {
                console.log(data);
            });
            // continuously check for updates in the db 
            setInterval(function () {
                //this.getProductTotals(this.selectedDate);
            }.bind(this), 5000); 
        }

    }
</script>

Everything runs 100% fine including running Vue.nextTick()

If I console.log self.$refs I get an empty object. I'm unable to get anything other than an empty Object even in my root app.js file.

Answer 1

You are trying to access this.$refs.vuetable, but you don't have any elements in your template with the ref attribute.

Add ref="vuetable" to your <vuetable> tag:

<template>
  <vuetable
    :fields="table.fields"
    :apiUrl="table.url"
    :append-params="urlParams"
    ref="vuetable"
  ></vuetable>
</template>

Here's the documentation on refs.