Vuejs сортирует и фильтрует данные

Я пытаюсь выполнить сортировку и фильтры для своих данных. У меня есть карточки из API. Для сортировки у меня есть несколько проблем (сортировка карточек по цене, сортировка по времени и т. д.) Сортировка по умолчанию - по цене, она включена.

Фильтры - это входные данные, которые должны показывать / скрывать мои карты (пример: диапазон минимальных и максимальных цен)

Я уже сделал свои фильтры, но когда я пытаюсь отсортировать элементы по времени, логика v-show фильтра сохранена из предыдущей сортировки (сортировка по цене)

Карты поступают из установленного () ответа axios

Result.vue

Кнопки для сортировки

<div class="sort-btn down" v-bind:class="{ activesort: activesort }" 
    v-on:click='changeSort'>By Price
</div>
<div class="sort-btn down" v-bind:class="{ activesort: !activesort }" 
    v-on:click='changeSort'>By Time
</div>

Компонент карты

<card :item="item" v-for="(item, index) in filteredAndSortedData"
:key="index"></card>

JS

computed: {
            filteredAndSortedData() {
                let result = this.cards;
                if(this.orderByTime){
                    return result.items.sort(function(a, b) {
                        return a.info.time - b.info.time;
                    });
                } else {
                    return result.items.sort(function(a, b) {
                        return a.price - b.price;
                    });
                }

            }
        }

data() {
    return {
        activesort: true,
        orderByTime: false,
        showFilters: false,
    }
},

methods: {
    changeSort: function () {
        this.activesort = !this.activesort;
        this.orderByTime = !this.orderByTime;
    },
}

Card.vue

<div class="card-wrapper" v-bind:class="{'has-label': hasLabel}" v-show="showCard">
    <div>{{item.price}}</div>
    <div>{{item.time}}</div>
</div>

data () {
    return {
        showCard: true,
    }
},

methods: {
    changeFilter() {
        if(some logic when clicking input){
            this.showCard = false;
        }
    }
}

Итак, проблема в том, что у меня две кнопки сортировки, несколько кнопок фильтров. Когда я пытаюсь изменить сортировку, а затем использую кнопку фильтров, все работает правильно. Но когда я пытаюсь сначала отфильтровать, а затем изменить сортировку, я получаю отсортированные карточки, но фильтры работают некорректно

Также я установил js рабочий пример для представления того, что я хочу.

2
0
7 141
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Почему бы вам просто не добавить:

result = result.filter(todo => todo.price >= this.price);

перед сортировкой? Ваш наблюдатель и свойство show в ваших задачах тоже не нужны.

https://jsfiddle.net/3wLtk6zn/4/

Изменить: если вы хотите сделать это по-своему с наблюдателем, это тоже возможно: https://jsfiddle.net/3wLtk6zn/8/

Причина, по которой ваш код не работает, заключается в том, что каждый раз, когда ваше свойство todos пересчитывается, вы устанавливаете свой result на массив со всеми элементами, а ваш наблюдатель фильтрует ваш результат только при изменении цены, поэтому изменение метода сортировки «не фильтрует» массив. Это можно исправить, переместив result за пределы вычисляемого свойства в data.

Это можно исправить, переместив результат за пределы вычисляемого свойства в данные. Я не могу переместить его в данные, потому что результатом является ответ API в моем смонтированном жизненном крючке, и когда результат рендеринга страницы будет пустым, и у меня есть ошибки

mtleppay 10.08.2018 15:19

Другие вопросы по теме