Vue3中使用Pinia计算属性的v-for渲染与数据不匹配问题求助

我有一个从Pinia store获取员工数据的组件，以及一个按办公地点筛选员工的筛选组件。在Vue开发者工具中查看时，selectedOffices和filteredEmployeeList的数据均符合预期，但组件中渲染的filteredEmployeeList列表与开发者工具显示的数据不匹配，请问可能的原因是什么？

员工列表组件代码 #

<template>
<div class="employees">
  <EmployeeCard
    v-for="(employee, idx) in filteredEmployeeList"
    :key="idx"
    :employee-data="employee"
  />
</div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import EmployeeFilter from '@/components/EmployeeFilter.vue';
import EmployeeCard from '@/components/EmployeeCard.vue';

import { useEmployeesStore } from '@/stores/employees';
const employeesStore = useEmployeesStore();
const { filteredEmployeeList } = storeToRefs(employeesStore);

</script>

筛选组件代码 #

<template>
<div class="filter-wrapper">
      <div 
        v-for="(office, idx) in employeesStore.offices" 
        class="office-filter"
      >
        <label :for="idx">
          <input 
            v-model="employeesStore.selectedOffices"
            :value="office"
            class="checkbox"
            type="checkbox"
          >
            {{ office }}
        </label>
      </div>
</div>
</template>

Pinia Store代码 #

const selectedOffices = ref([]);

const selectedFiltersLength = computed(() => {
    return selectedOffices.value.length;
  });

const filteredEmployeeList = computed(() => {
   // 未选择筛选条件时返回所有员工
   if (selectedFiltersLength.value == 0) {
      return employees.value;
    }

    return employees.value.filter(employee => selectedOffices.value.includes(employee.office));
  });

可能的原因及解决方案 #

核心原因：v-for错误使用索引作为key #

员工列表组件中，v-for的key绑定了循环索引idx。Vue的虚拟DOM Diff算法会基于key判断组件实例是否需要复用：

• 当筛选后列表的元素顺序、数量发生变化时，索引idx不会随数据内容改变而变化，Vue会复用现有组件实例，而非重新渲染对应的数据项。
• 这就导致开发者工具中filteredEmployeeList数据正确，但组件显示的还是旧数据。

解决方案：
将key改为员工数据的唯一标识（比如employee.id），确保每个数据项的key唯一且稳定：

<EmployeeCard
  v-for="employee in filteredEmployeeList"
  :key="employee.id"
  :employee-data="employee"
/>

次要可能原因：筛选值类型不匹配 #

如果office是对象类型，selectedOffices.value.includes(employee.office)会因为对象引用不同而判断错误。不过你提到开发者工具中filteredEmployeeList数据正确，这个可能性较低，但可以排查：

• 若office是对象，需调整筛选逻辑，比较对象的唯一属性：

return employees.value.filter(employee => 
  selectedOffices.value.some(office => office.id === employee.office.id)
);

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