使用多选菜单过滤答案

【问题标题】：Filtering with a multi-select menu使用多选菜单过滤
【发布时间】：2022-03-25 08:51:52
【问题描述】：

所以我有一个选择菜单，可以让用户选择多个选项。选定的选项对应于actorModel。然后我有一个对象数组，我希望根据所选选项对其进行过滤。如果用户选择了选项 A 和 B ，那么它将从 actorDocs 返回两个对象。具有标签值“A”的一个和一个具有标签值“B”的一个。如果未选择任何选项（actorModel 为 null），则它将返回来自 actorDocs 的所有对象。

我在这段代码中遇到的问题是它只有在用户选择一个选项时才有效。如果用户选择了多个，那么我认为它正在尝试定位具有多个标签的对象，而不是每个标签的多个对象。

欢迎任何帮助

const actorModel = ref({ 0:'label1', 1:'label2', 3:'label3'})
const actorDocs = ref([{'label':'label1'},{'label':'label2'},{'label':'label3'},{'label':'label4'}])

const actorListTest2 = computed(() => {
    if (actorModel.value == null){var ttt = actorDocs.value} 
    else { 

      var ttt = actorDocs.value.filter(obj => {
        return (
         (!actorModel.value.length || obj.label.includes(actorModel.value) )
       ) })}
    lenActordata.value = ttt.length
    return ttt
    });

【问题讨论】：

我尝试了你的建议，结果还是一样@MWO
如果你像这样写过滤器会怎样var ttt = actorDocs.filter(obj => { if(!Object.keys(actorModel.value).length || Object.values(actorModel.value).includes(obj.label)) return obj })

标签： javascript vue.js drop-down-menu filtering vuejs3

【解决方案1】：

尝试如下 sn-p:

const actorModel = {0:'label1', 1:'label3'}
const actorDocs = [{'label':'label1'}, {'label':'label2'}, {'label':'label3'}, {'label':'label4'}]

const actorListTest2 = () => {
  if (actorModel == null){
    return actorDocs
  } else { 
    return actorDocs.filter(obj => [...Object.values(actorModel)].includes(obj.label))
  }
};
console.log(actorListTest2())

【讨论】：