Каков наилучший способ фильтрации данных из массива с помощью Vue JS?

Question

Я ищу лучшие практики.

Я получаю этот список продуктов из своего API:

[
    {
        "id": 6,
        "name": "Pechuga de pollo",
        "category": "Chicken",
        "existencia": 100
    },
    {
        "id": 7,
        "name": "Pierna de pavo",
        "category": "Chicken",
        "existencia": 100
    },
    {
        "id": 8,
        "name": "Lonja de pescado",
        "category": "Fish",
        "existencia": 200
    },
    {
        "id": 9,
        "name": "Coca Cola",
        "category": "Soda",
        "existencia": 200
    },
    {
        "id": 10,
        "name": "Jugo de naranja",
        "category": "Juice",
        "existencia": 200
    }
]

Поэтому мне нужно отфильтровать этот массив продуктов по значению "Цыпленок".

Я пытался использовать метод filter (), и он хорошо работает.

this.chickenProducts =productList.filter(product=>product.category=="Chicken")

Затем я использую директиву v-for с массивом chickenProducts, чтобы заполнить только выбранные входные данные.содержит куриные продукты.

Знаете ли вы другой способ фильтрации данных из массива для заполнения выбранных входных данных с учетом критериев в Vue JS?Я еще тренируюсь с Вью.

Answer 1

вычисленный массив фильтров? Кстати, я помню, Vue1 может использовать filterBy в v-for, но Vue2 удалил его.

Answer 2

Ваш способ реализации немного строг.Что если вы захотите изменить условия фильтрации?или у вас есть несколько условий в вашем коде?

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