1
장착 후크 빈 객체 입력 필드의 날짜 변경을 듣는 내 vue 구성 요소에 설정합니다. 이 일이 발생하면 내 API에서 새로운 결과 집합을 가져 오도록 날짜의 쿼리 매개 변수를 변경하고 있습니다.
내 문제는 내 새 쿼리 매개 변수로 refresh() 메서드를 실행할 수 없다는 것입니다.
는 여기에 내가 자기 CONSOLE.LOG 경우 모든 것이 Vue.nextTick를 (실행을 포함하여 100 % 벌금)
를 실행
<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>
내 구성 요소입니다. $의 심판 나는 빈 개체를 얻을. 루트 app.js 파일에서도 빈 객체가 아닌 다른 것을 얻을 수 없습니다.