Как ограничить вывод элементов во Vue.js?

Question

[kimqar123]

Есть следующий код, который выводит элементы по возрастанию цены или уменьшению.

showedItems: function () {
                return this.items.filter((item) => {
                    return (this.keyword.length === 0 || item.name.includes(this.keyword))
                }).sort((a, b) => {
                        if (this.sortBy == 'PriceMinMax') {
                            return (a.fullCost-b.fullCost);
                        }
                        else if (this.sortBy =='PriceMaxMin') {
                            return (b.fullCost-a.fullCost);
                        }
                    }
                )
            }

Есть также код, который выводит элементы с ограничениями (в переменной showedItemsCount хранится число сколько будет показано элементов на странице, в данном случае - 5)

const addCount = 5;

showedItems() {
return this.items.slice(0, this.showedItemsCount)
}

Как объединить эти два кода чтобы в первом сделать ограничение на вывод элементов?
Фреймворк vue. Спасибо заранее.

Comments

[0xD34F]

Сделать slice отсортированному массиву - нет, никак?

[kimqar123]

0xD34F, я пробовал писать (b.fullCost-a.fullCost).slice(0, this.showedItemsCount). не выводит

[0xD34F]

kimqar123, то есть, пытались slice у числа вызвать. Понятно. Вам надо было попробовать освоить js, прежде чем браться за vue.

[kimqar123]

0xD34F, а понял, спасибо за подсказку, в фильтре прописал this.items.slice(0, this.showedItemsCount) и заработало.

[kimqar123]

0xD34F, я думал, что sort(a,b) сортирует элементы, и если прописать там ограничение, то будут работать, а вы подсказали что это числа.

Answer 1

[Alex]

Разбейте это всё на несколько вычисляемых переменных: filteredItems, sortedItems, slicedItems, itemsToShow. И для вичисления каждой используйте предыдущую. И код будет проще читать и производительность вырастет.