VueTable 2 $ refs объект пустой в смонтированном хуке

1

Я прочитал несколько сообщений, в которых свойство $ refs экземпляра vue доступно только в установленном крюке Vue.js

У меня есть пользовательский прослушиватель событий, настроенный в моем компоненте vue, который слушает изменение даты в поле ввода. Как только это произойдет, я изменяю параметр запроса даты, чтобы получить новый набор результатов из моего API.

Моя проблема в том, что я не могу запустить метод refresh() с помощью моего нового параметра запроса.

Здесь мой компонент

<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>

Все работает на 100%, включая запуск Vue.nextTick()

Если я console.log self. $ Refs, я получаю пустой объект. Я не могу получить ничего, кроме пустого объекта, даже в моем корневом файле app.js.

Теги:
vuejs2
hook
lifecycle

1 ответ

2
Лучший ответ

Вы пытаетесь получить доступ к this.$refs.vuetable, но у вас нет элементов в вашем шаблоне с атрибутом ref.

Добавьте ref="vuetable" в <vuetable>:

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

Здесь документация по refs.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню