Я пытаюсь выполнить сортировку и фильтры для своих данных. У меня есть карточки из 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 рабочий пример для представления того, что я хочу.
Почему бы вам просто не добавить:
result = result.filter(todo => todo.price >= this.price);
перед сортировкой? Ваш наблюдатель и свойство show
в ваших задачах тоже не нужны.
https://jsfiddle.net/3wLtk6zn/4/
Обновлено: если вы хотите сделать это по-своему с наблюдателем, это тоже возможно: https://jsfiddle.net/3wLtk6zn/8/
Причина, по которой ваш код не работает, заключается в том, что каждый раз, когда ваше свойство todos
пересчитывается, вы устанавливаете свой result
на массив со всеми элементами, а ваш наблюдатель фильтрует ваш результат только при изменении цены, поэтому изменение метода сортировки «не фильтрует» массив. Это можно исправить, переместив result
за пределы вычисляемого свойства в data
.
Это можно исправить, переместив результат за пределы вычисляемого свойства в данные. Я не могу переместить его в данные, потому что результатом является ответ API в моем смонтированном жизненном крючке, и когда результат рендеринга страницы будет пустым, и у меня есть ошибки