Я пытаюсь отфильтровать таблицу по одному полю, нажав на кнопку с соответствующим названием состояния. В браузере в инспекторе я вижу, что все обновляется по мере необходимости в
<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 %}
Простой
