[英]VueTable 2 $refs object empty in mounted hook
I've read several posts where the $refs property of the vue instance is only available in the mounted hook of Vue.js我已经阅读了几篇文章,其中 vue 实例的$refs属性仅在 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.我在我的 vue 组件中设置了一个自定义事件侦听器,用于侦听输入字段中的日期更改。 Once this happens I am changing the query parameter of the date to fetch a new set of results from my API.一旦发生这种情况,我将更改日期的查询参数以从我的 API 中获取一组新的结果。
My problem is that I cannot run the refresh() method with my new query parameter.我的问题是我无法使用新的查询参数运行 refresh() 方法。
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()一切运行 100% 正常,包括运行Vue.nextTick()
If I console.log self.$refs I get an empty object.如果我 console.log self.$refs我得到一个空对象。 I'm unable to get anything other than an empty Object even in my root app.js file.即使在我的根 app.js 文件中,我也无法获得除空对象之外的任何内容。
You are trying to access this.$refs.vuetable
, but you don't have any elements in your template with the ref
attribute.您正在尝试访问this.$refs.vuetable
,但您的模板中没有任何具有ref
属性的元素。
Add ref="vuetable"
to your <vuetable>
tag:将ref="vuetable"
添加到您的<vuetable>
标记中:
<template>
<vuetable
:fields="table.fields"
:apiUrl="table.url"
:append-params="urlParams"
ref="vuetable"
></vuetable>
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.