VueJS-从复选框选择中过滤项目

时间:2018-10-09 15:14:11

标签: arrays checkbox vue.js vuejs2

我希望通过类别名称完善我的数据输出。

如何通过 cat_array 过滤输出项?保留我的文本搜索过滤器吗?

    {
    "id": 1,
    "title": "Title one",
    "category_data": {
        "2": "Team",
        "7": "Queries"
    }
},

我已经使用此工具进行了测试:

return  vm.info.filter(item => this.cat_array.includes(item.category_id))

Codepen示例https://codepen.io/anon/pen/XxNORW?editors=1011

谢谢

1 个答案:

答案 0 :(得分:2)

一种方法-(不关心All逻辑):

this.info.filter(
  item => Object.values(item.category_data).some(
    cat => this.cat_array.includes(cat))
)

演示

var info = [
    {
        "id": 1,
        "title": "Title one",
        "category_data": {
            "2": "Team",
            "7": "Queries"
        }
    },
    {
        "id": 2,
        "title": "Title two",
        "category_data": {
            "2": "Team",
            "7": "Queries"
        }
    },
    {
        "id": 3,
        "title": "Title three",
        "category_data": {
            "2": "Team",
            "7": "Queries"
        }
    },
    {
        "id": 4,
        "title": "Title four",
        "category_data": {
            "2": "Team",
            "7": "Queries"
        }
    },
    {
        "id": 5,
        "title": "Title five",
        "category_data": {
            "2": "Team",
            "6": "Questions",
            "7": "Queries"
        }
    },
    {
        "id": 6,
        "title": "Title six",
        "category_data": {
            "2": "Team",
            "6": "Questions",
            "7": "Queries",
            "12": "Fax",
        }
    }
]

var cat_array = ["Questions"]

console.log(
  info.filter(
    item => Object.values(item.category_data).some(
      cat => cat_array.includes(cat)
    )
  )
)