PrimeVue带搜索过滤器的Dropdown重置问题：无法清除筛选输入内容

开发项目管理工具仪表盘时，用户可通过项目、状态、截止日期筛选任务。因项目列表较多，给Dropdown组件添加了搜索过滤器，设置的「重置」按钮仅能清除v-model绑定的选中值，无法清除「选择项目」Dropdown的筛选输入框内容。尝试过用ref获取组件、通过PrimeVue默认筛选类名操作，均未生效。相关代码如下：

<script setup>
const selectedProject = ref();
const statuses = ref();

const filterStatus = ref();
const filterDueDate = ref();
const isCalendarSelected = ref(false);

watch(selectedProject, (newVal) => {
  statuses.value = [{ name: 'All', id: '' }, ...(selectedProject.value?.statuses?.map((status) => ({ name: status.name, id: status.id })) || [])];
});

const selectedStatus = ref();

const projectId = ref();
const sta = ref();
const enD = ref();

const filterTasks = async () => {
  projectId.value = selectedProject.value ? selectedProject.value.id : '';
  sta.value = selectedStatus.value ? selectedStatus.value.id : '';
  enD.value = filterDueDate.value;
  fetchTasks(projectId.value, sta.value, enD.value);
};

const selectFilterDate = (newDate) => {
  isCalendarSelected.value = true;
  const date = new Date(newDate);
  filterDueDate.value = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
  filterTasks();
};

const handleDateDelete = () => {
  isCalendarSelected.value = false;
  filterDueDate.value = '';
  enD.value = '';
  filterTasks();
};

const handleFilterReset = () => {
  if(selectedProject.value || filterStatus.value || 
  filterDueDate.value) {
  selectedProject.value = '';
  filterStatus.value = '';
  filterDueDate.value = '';
  projectId.value = '';
  sta.value = '';
  selectedStatus.value = '';
  isCalendarSelected.value = false;
  filterTasks();
  }else{
  return;
 }
};
</script>

<template>
 <div class="flex gap-2 align-items-center flex-wrap" style="padding: 10px;">
  <h5 class="mb-2">Tasks</h5>
  <!-- Filter -->
  <div class="flex gap-2 flex-wrap justify-content-end filter-container">
   <Dropdown @change="filterTasks()" filter filterPlaceholder="Search Projects" v-model="selectedProject" :options="totalProjects" optionLabel="name" placeholder="Select Project" class="w-full md:w-12rem mb-2" />
   <Dropdown @change="filterTasks()" v-model="selectedStatus" :options="statuses" :disabled="!selectedProject" optionLabel="name" placeholder="Select Status" class="w-full md:w-12rem mb-2" />
   <div class="mb-2 relative w-full md:w-12rem">
    <Calendar @date-select="selectFilterDate($event)" showClear v-model="filterDueDate" placeholder="Select Date" class="w-full md:w-12rem" />
     <p v-if="isCalendarSelected" @click="handleDateDelete" class="pi pi-times end-cross absolute cursor-pointer"></p>
   </div>
   <Button @click="handleFilterReset" label="Reset" class="mb-2" severity="secondary" />
  </div>
 </div>
</template>

PrimeVue的Dropdown组件提供了内置的筛选清除方法，无需操作DOM，修改步骤如下：

1. 给带筛选功能的Dropdown添加ref属性：

<Dropdown ref="projectDropdown" ... />

2. 在script中定义对应的ref变量：

const projectDropdown = ref(null);

3. 在重置方法handleFilterReset中，调用Dropdown实例的clearFilter()方法，同时确保选中值被清空：

const handleFilterReset = () => {
  if(selectedProject.value || filterStatus.value || filterDueDate.value) {
    selectedProject.value = '';
    filterStatus.value = '';
    filterDueDate.value = '';
    projectId.value = '';
    sta.value = '';
    selectedStatus.value = '';
    isCalendarSelected.value = false;
    // 清除Dropdown的筛选输入内容
    projectDropdown.value?.clearFilter();
    filterTasks();
  }
};

修改后的完整代码：

<script setup>
import { ref, watch } from 'vue';

const selectedProject = ref();
const statuses = ref();
const projectDropdown = ref(null); // 添加Dropdown的ref引用

const filterStatus = ref();
const filterDueDate = ref();
const isCalendarSelected = ref(false);

watch(selectedProject, (newVal) => {
  statuses.value = [{ name: 'All', id: '' }, ...(newVal?.statuses?.map((status) => ({ name: status.name, id: status.id })) || [])];
});

const selectedStatus = ref();

const projectId = ref();
const sta = ref();
const enD = ref();

const filterTasks = async () => {
  projectId.value = selectedProject.value ? selectedProject.value.id : '';
  sta.value = selectedStatus.value ? selectedStatus.value.id : '';
  enD.value = filterDueDate.value;
  fetchTasks(projectId.value, sta.value, enD.value);
};

const selectFilterDate = (newDate) => {
  isCalendarSelected.value = true;
  const date = new Date(newDate);
  filterDueDate.value = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
  filterTasks();
};

const handleDateDelete = () => {
  isCalendarSelected.value = false;
  filterDueDate.value = '';
  enD.value = '';
  filterTasks();
};

const handleFilterReset = () => {
  if(selectedProject.value || filterStatus.value || filterDueDate.value) {
    selectedProject.value = '';
    filterStatus.value = '';
    filterDueDate.value = '';
    projectId.value = '';
    sta.value = '';
    selectedStatus.value = '';
    isCalendarSelected.value = false;
    // 调用Dropdown内置方法清除筛选输入
    projectDropdown.value?.clearFilter();
    filterTasks();
  }
};
</script>

<template>
 <div class="flex gap-2 align-items-center flex-wrap" style="padding: 10px;">
  <h5 class="mb-2">Tasks</h5>
  <!-- Filter -->
  <div class="flex gap-2 flex-wrap justify-content-end filter-container">
   <Dropdown 
     ref="projectDropdown"
     @change="filterTasks()" 
     filter 
     filterPlaceholder="Search Projects" 
     v-model="selectedProject" 
     :options="totalProjects" 
     optionLabel="name" 
     placeholder="Select Project" 
     class="w-full md:w-12rem mb-2" 
   />
   <Dropdown @change="filterTasks()" v-model="selectedStatus" :options="statuses" :disabled="!selectedProject" optionLabel="name" placeholder="Select Status" class="w-full md:w-12rem mb-2" />
   <div class="mb-2 relative w-full md:w-12rem">
    <Calendar @date-select="selectFilterDate($event)" showClear v-model="filterDueDate" placeholder="Select Date" class="w-full md:w-12rem" />
     <p v-if="isCalendarSelected" @click="handleDateDelete" class="pi pi-times end-cross absolute cursor-pointer"></p>
   </div>
   <Button @click="handleFilterReset" label="Reset" class="mb-2" severity="secondary" />
  </div>
 </div>
</template>

说明 #

• clearFilter()是PrimeVue Dropdown组件的内置方法，专门用于清除筛选输入框的内容，同时会恢复显示所有选项
• 确保ref正确绑定到Dropdown组件，这样才能访问到组件实例的方法

内容的提问来源于stack exchange，提问作者tawsifahmed