1
に空のオブジェクト入力フィールドの日付の変更を待ち受けする私のビューコンポーネントに設定します。これが起こると、私のAPIから結果の新しいセットを取得するために、日付のクエリパラメータを変更しています。
私の問題は、新しいクエリパラメータでrefresh（）メソッドを実行できないということです。私は自己をCONSOLE.LOG場合
ここに私のコンポーネントは
<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％の罰金を実行します。$レフリー私は空のオブジェクトを取得します。 rootのapp.jsファイルでも空のObject以外は取得できません。