vue 3 组合 api，基于反应数据的链接过滤器

Question

我有一个 orbject 数组作为数据，我想有几个 select 菜单以便过滤数据并以反应方式在屏幕上显示它。我已经设法让一个过滤器工作，但这里的想法是能够链接过滤器，以便可以通过 select vlaues.

的任意组合来过滤结果。

我已将我的代码分解为以下最简单的示例：

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

Answer 1

受此 post (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)
    })}
    
    });

vue 3 组合 api，基于反应数据的链接过滤器

vue 3 composition api, chaining filters uppon reactive data

filtering

vue.js

vuejs3

vue-composition-api