[英]Vue.js not updated table
我試圖通過單擊具有相應 state 名稱的按鈕來按一個字段過濾表格。 在檢查器的瀏覽器中,我看到<Root>
中的所有內容都根據需要進行了更新,並且工作正常,但<VtServerTable>
保持不變,因此頁面上沒有任何變化。 請告訴我我做錯了什么,添加什么以及在哪里添加?
代碼:
{% extends 'sycatalog/sy_profile.html' %}
{% block data %}
<div id="crm-app">
<div class="managers">
<ul>
<li v-for="manager in managers">{% verbatim %}{{ manager.name_raw }}{% endverbatim %}</li>
</ul>
</div>
<button class="btn btn-secondary" :class="{active:state==selectedState}" v-for="state in states" @click="stateFilter(state)">
{% verbatim %}{{ state.abbr }}{% endverbatim %}
</button>
<button class="btn btn-default" @click="stateFilter('')">Сбросить</button>
<v-server-table ref="table" url="/crm/customeroffice/" :columns="columns" :options="options">
</v-server-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tables-2@2.0.23/dist/vue-tables.js"></script>
<script>
Vue.config.devtools = true;
Vue.use(VueTables);
const ServerTable = VueTables.ServerTable;
const Event = VueTables.Event;
Vue.use(ServerTable);
new Vue({
el: "#crm-app",
methods: {
stateFilter: function(state) {
let url = '/crm/customeroffice/'
let params = {'state': state.id};
this.selectedState = state;
axios.get(url, {
params: params
}).then((response) => {
this.data = response.data.results;
this.$refs.table.refresh();
}).catch( error => { console.log(error); })
.finally(() => (global_waiting_stop()));
},
getManagers: function () {
let url = '/crm/crmuser/';
let data = {'type': 'responsibles'};
axios.get(url, {
params: data
}).then((response) => {
this.managers = response.data.results;
}).catch( error => { console.log(error); })
.finally(() => (global_waiting_stop()));
},
getStates: function () {
let url = '/crm/state/';
axios.get(url).then((response) => {
this.states = response.data.results;
}).catch( error => { console.log(error); })
.finally(() => (global_waiting_stop()));
}
},
mounted () {
this.getManagers();
this.getStates();
},
data: {
// filterByColumn: true,
columns: ['id', 'customer.name', 'state.name'],
// editableColumns:['name'],
// sortable: ['sap', 'name'],
// filterable: ['sap', 'name'],
data: [],
states: [],
selectedState: '',
managers: [],
options: {
requestFunction(data) {
return axios.get(this.url, {
params: data
}).catch(function (e) {
this.dispatch('error', e);
}).finally(() => (global_waiting_stop()));
},
responseAdapter(resp) {
var data = this.getResponseData(resp);
return {data: data.results, count: data.count}
},
}
}
});
</script>
{% endblock %}
您的data
不是被動的。 它應該是 function 並返回您的數據屬性,例如:
data() {
return {
// filterByColumn: true,
columns: ['id', 'customer.name', 'state.name'],
// editableColumns:['name'],
// sortable: ['sap', 'name'],
// filterable: ['sap', 'name'],
data: [],
states: [],
selectedState: '',
managers: [],
options: {
requestFunction(data) {
return axios.get(this.url, {
params: data
}).catch(function (e) {
this.dispatch('error', e);
}).finally(() => (global_waiting_stop()));
},
responseAdapter(resp) {
var data = this.getResponseData(resp);
return {data: data.results, count: data.count}
},
}
};
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.