VueTable 2 $refs 对象在已安装的挂钩中为空

Question

我看过几篇帖子，其中vue实例的$refs 属性只能在Vue.js[=11的挂载钩子中使用=]

我在我的 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>

一切运行s 100% 罚款包括运行ning Vue.nextTick()

如果我 console.log self.$refs 我得到一个空对象。即使在我的根 app.js 文件中，我也只能得到一个空对象。

Answer 1

您正在尝试访问 this.$refs.vuetable，但您的模板中没有任何具有 ref 属性的元素。

将 ref="vuetable" 添加到您的 <vuetable> 标签：

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

Here's the documentation on refs.

VueTable 2 $refs 对象在已安装的挂钩中为空

VueTable 2 $refs object empty in mounted hook

javascript

hook

lifecycle

vuejs2