마운트된 후크에서 VueTable 2 $refs 개체가 비어 있습니다.

마운트된 후크에서 VueTable 2 $refs 개체가 비어 있습니다.

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>

Vue.nextTick()을 실행하는 것을 포함하여 모든 것이 100% 정상 가동됩니다.

console.log self를 사용하는 경우.$refs 빈 객체가 나타납니다.루트 app.js 파일에서도 빈 오브젝트 이외에는 취득할 수 없습니다.

접속하려고 합니다.this.$refs.vuetable단, 템플릿에 요소가 없습니다.ref기여하다.

더하다ref="vuetable"고객님께<vuetable>태그:

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

다음은 에 관한 문서입니다.refs.

언급URL : https://stackoverflow.com/questions/47015435/vuetable-2-refs-object-empty-in-mounted-hook