@ekzotika

Vue.js не работает фильтр таблицы одному полю?

Необходимо, чтобы при нажатии на соответствующую кнопку области, таблица фильтровалась по этой области. Вроде всё правильно написано, но при нажатии на кнопку ничего не происходит. Данные берутся из JSON. Код:

{% 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', 'state'],
            // 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 %}


Подскажите, в чем проблема?
  • Вопрос задан
  • 69 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы