vue 3 composition api，将过滤器链接到反应数据答案

【问题标题】：vue 3 composition api, chaining filters uppon reactive datavue 3 composition api，将过滤器链接到反应数据
【发布时间】：2022-01-12 11:43:25
【问题描述】：

我有一个对象数组作为数据，我希望有几个选择菜单来过滤数据并以反应方式将其显示在屏幕上。我已经设法让一个过滤器工作，但这里的想法是能够链接过滤器，以便可以通过选择值的任意组合过滤结果。

我已将我的代码分解为下面的一个极简示例：

<template>
  <div class="mp" style="width: 100vw;">
    <div class="col-2">
                <span class="lbl">FILTER1</span>
                <select v-model="selectedMA" class="form-select"  >
                <option value="">all</option>
                <option value="Germany">Germany</option>
                </select>
    </div>
    <div class="col-2">
                <span class="lbl">FILTER2</span>
                <select v-model="selectedMA2" class="form-select"  >
                <option value="">all</option>
                <option value="Tier1">Tier1</option>
                </select>
    </div>

    <p>DATA :</p>
    <p> {{actorListTest2}} </p>
  </div>  
</template>


<script >
import {onMounted, onBeforeMount, ref, computed, watch} from 'vue'
import getActorDocs from '../composables/getActorDocs'
export default {
setup(){

  const {actorDocs, loadActors} = getActorDocs()
  const selectedMA = ref("all")
  const selectedMA2 = ref("all")
  
  loadActors(); // load data
  var filteredActors = actorDocs

  const actorListTest2 = computed(() => {
    if(selectedMA.value == "all" && selectedMA2.value == "all"){return filteredActors}
    else{ 
      return filteredActors.filter(obj => {
        return obj.country == selectedMA.value
      }).filter(obj => {
          return obj.type == selectedMA2.value
      })}
    
    });


    return {filteredActors, actorListTest2, selectedMA, selectedMA2, actorDocs}
    }//setup
}
</script>


<style scoped>
</style>

【问题讨论】：

标签： vue.js filtering vuejs3 vue-composition-api

【解决方案1】：

受这篇文章 (Array filtering with multiple conditions javascript) 的启发，我想出了一种让它发挥作用的方法。可能不是最好的方法，但它确实有效

const actorListTest2 = computed(() => {
    if(selectedMA.value == "" && selectedMA2.value == ""){return filteredActors}
    else { 
      return filteredActors.filter(obj => {
        return (!selectedMA2.value.length || obj.type == selectedMA2.value)
        && (!selectedMA.value.length || obj.country == selectedMA.value)
    })}
    
    });

【讨论】：