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中的条件从数组过滤数据以填充选择输入的另一种方法？我正在和Vue一起练习。

Answer 1

计算的滤波器数组？顺便说一句，我记得Vue1可以在v-for中使用filterBy，但是Vue2删除了它。

Answer 2

您的实施方式有点严格。如果您想更改过滤条件怎么办？或您的代码中有多个条件？

如果我是你，我将创建一个方法，该方法根据传递给它的条件返回一个数组。我对那个结果进行迭代。在维护和可扩展性方面，这更加直接和模块化。

使用Vue JS从数组中过滤数据的最佳方法是哪种？

2 个答案: