Как во Vue задействовать фильтр + сортировку одновременно?

Question

[igor_solweb]

Имеются вот такие два фильтра для выборки из товаров по ним, как лучше и правильнее реализовать сортировку и фильтр вместе?
То есть, при выборе категории фильтр также должен учитываться и в обратном направлении тоже, пока получилось сделать лишь отдельно сортировку по цене и имени их сделал через .sort((a, b) => a.price < b.price ? 1 : -1);.
При выборе категории использую .filter(), но он фильтрует внутри массива, но на вывод не делает, то есть при применении сортировки сразу все отображается (происходит перерисовка товаров в компоненте), а при фильтре нет.

Answer 1

[0xD34F]

Сделать вычисляемое свойство, где будут выполняться все необходимые вам преобразования данных. Например.

Comments

[igor_solweb]

Спасибо огромное за подробный пример, немного сложно пока понять, но пытаюсь. Как раз то, что нужно.
Но еще вопрос, как можно в вашем примере добавить сортировку той же популяции по возрастанию? Просто вижу что у вас по key выбирается значение того, что сравнивать, но оно и нужно для другого действия, вижу такой вариант, чтобы добавить еще одно свойство вроде: 'populationDown' с теми же значениями, но это уже повторение кода будет.

key: 'name',
      options: [
        { key: 'name', title: 'название', compare: (a, b) => a.localeCompare(b) },
        { key: 'continent', title: 'континент', compare: (a, b) => a.localeCompare(b) },
        { key: 'population', title: 'население', compare: (a, b) => a - b },
        { key: 'population', title: 'население вниз', compare: (a, b) => b - a }
      ],

При таком варианте, понятно что будет выбираться всегда сортировка популяции он нижнего значения к верхнему.
думаю есть вариант гораздо проще, имея это значение просто задать ему другую сортировку.

[0xD34F]

Добавьте свойство, отвечающее за направление сортировки и, в зависимости от его значения, умножайте результат сравнения на +/- 1. Обновил пример в ответе.

[igor_solweb]

0xD34F, Еще раз спасибо, сделал под свой проект, все работает!