How to limit the output of elements in Vue.js?

Question

JavaScript

There is the following code, which displays items in ascending or descending order.

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);
                        }
                    }
                )
            }

There is also a code that displays elements with restrictions (the shownItemsCount variable stores the number of how many items will be shown on the page, in this case - 5)

const addCount = 5;

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

How to combine these two codes in order to limit the output of elements in the first one?
vue framework. Thanks in advance.

Answer 1

Break it all down into several calculated variables: filteredItems, sortedItems, slicedItems, itemsToShow. And to calculate each one, use the previous one. And the code will be easier to read and performance will increase.