Vue3实现多Select下拉框自动筛选数组数据需求

我是Vue新手，现有一个包含多条数据的数组，页面设有3个Select下拉框。当前需点击按钮才会展示筛选后的数据，现要修改为当所有下拉框选中内容后自动展示筛选结果，要求用Vue3实现。

修改要点 #

• 移除原有的触发按钮和手动展示逻辑
• 新增计算属性判断三个下拉框是否全部选中
• 用该计算属性控制筛选结果的展示

修改后的模板代码 #

<template>
  <div>
    <h2>Users</h2>
    <div>
      <label for="foodType">Food Type:</label>
      <v-select
        id="foodType"
        v-model="selectedFoodType"
        :options="foodTypes"
      ></v-select>
    </div>
    <div>
      <label for="country">Country:</label>
      <v-select
        id="country"
        v-model="selectedCountry"
        :options="countries"
      ></v-select>
    </div>
    <div>
      <label for="district">District:</label>
      <v-select
        id="district"
        v-model="selectedDistrict"
        :options="districts"
      ></v-select>
    </div>
    <!-- 移除原触发按钮，通过计算属性自动控制展示 -->
    <ul v-if="allFiltersSelected">
      <li v-for="user in filteredUsers" :key="user.id">
        <p>Name: {{ user.name }}</p>
        <p>Food Type: {{ user.foodType }}</p>
        <p>Country: {{ user.country }}</p>
        <p>District: {{ user.district }}</p>
        <p>projectName: {{ user.projectName }}</p>
      </li>
    </ul>
  </div>
</template>

修改后的JS代码 #

import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css';

export default {
  components: {
    vSelect
  },
  data() {
    return {
      users: [
        { id: 1, name: "Aluino", foodType: "Swales", country: "japan", district: "Bigender", projectName:"LineOne" },
        { id: 2, name: "Ella", foodType: "Guitton", country: "Panama", district: "Female",projectName:"LineOne" },
        { id: 3, name: "Julina", foodType: "Tarbard", country: "USA", district: "Female",projectName:"LineOne" },
        { id: 4, name: "Walden", foodType: "McPhilip", country: "Brazil", district: "Male",projectName:"LineOne" },
        { id: 5, name: "Hillary", foodType: "Billingsley", country: "Norway", district: "Male",projectName:"LineThree" },
        { id: 6, name: "KKK", foodType: "McPhilip", country: "Brazil", district: "JJJ",projectName:"LineOne" },
        { id: 7, name: "LLL", foodType: "Billingsley", country: "Norway", district: "Male",projectName:"LineThree" }
      ],
      selectedFoodType: null,
      selectedCountry: null,
      selectedDistrict: null
    };
  },
  computed: {
    foodTypes() {
      return Array.from(new Set(this.users.map(user => user.foodType)));
    },
    countries() {
      return Array.from(new Set(this.users.map(user => user.country)));
    },
    districts() {
      return Array.from(new Set(this.users.map(user => user.district)));
    },
    filteredUsers() {
      let filtered = this.users;
      if (this.selectedFoodType) {
        filtered = filtered.filter(user => user.foodType === this.selectedFoodType);
      }
      if (this.selectedCountry) {
        filtered = filtered.filter(user => user.country === this.selectedCountry);
      }
      if (this.selectedDistrict) {
        filtered = filtered.filter(user => user.district === this.selectedDistrict);
      }
      return filtered;
    },
    // 新增计算属性：判断三个筛选条件是否全部选中
    allFiltersSelected() {
      return this.selectedFoodType !== null && this.selectedCountry !== null && this.selectedDistrict !== null;
    }
  }
}
</script>

关键说明 #

• 删除了原有的displayUsers变量和displayData方法，无需手动触发展示
• allFiltersSelected计算属性会实时监测三个下拉框的选中状态，全部选中后自动返回true，触发结果列表展示
• 原有筛选逻辑filteredUsers保持不变，确保筛选结果的正确性

内容的提问来源于stack exchange，提问作者R. Mahbub