Question

我已经阅读了几个帖子，其中vue实例的 $ refs 属性仅在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 我得到一个空对象。即使在我的root 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 $在挂钩

1 个答案: