使用 multi-select 菜单过滤

Question

所以我有一个 select 菜单，让用户 select 有多个选项。 selected 选项对应于 actorModel。然后我有一个对象数组，我希望根据 selected 选项过滤它。如果用户 select 编辑了选项 A 和 B ，那么它将 return 来自 actorDocs 的两个对象。具有标签值 'A' 的一个和具有标签值 'B' 的一个。如果没有选项被 selected（actorModel 为 null）那么它将 return 来自 actorDocs.

的所有对象

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

非常欢迎任何帮助

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
    });

Answer 1

像下面的片段一样尝试：

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())

使用 multi-select 菜单过滤

Filtering with a multi-select menu

javascript

filtering

drop-down-menu

vue.js

vuejs3