Vue.js计算属性过滤器使用property[index]失效问题求助

问题原因 #

你在v-for中循环的是过滤后的filterUserInfo数组，这里的index是过滤后数组的索引，和原userInfo数组的索引完全不匹配。当你用this.userInfo[index]取值时，相当于拿过滤后数组的位置去原数组里硬找——比如过滤后只剩第3条数据，此时index是0，就会取原数组的第0项，自然永远显示第一条数据。

解决方案 #

方案1：通过唯一标识定位原数组项（推荐）

既然需要操作原数组的数据，不要依赖索引，而是用数据的唯一标识（比如Guid）去原数组中查找对应项：

1. 在组件中添加查找方法：

methods: {
  getOriginalUser(guid) {
    return this.userInfo.find(user => user.Guid === guid)
  }
}

2. 修改模板取值逻辑，用循环到的user对象的Guid关联原数组：

<tbody>
  <tr v-for="(user, index) in filterUserInfo.sort((a,b) => a.DisplayName > b.DisplayName ? 1 : -1)" :key="user.Guid">
    <td>{{ index + 1 }}</td>
    <td>{{ getOriginalUser(user.Guid).DisplayName }}</td>
    <td class="d-flex justify-content-around">
      <font-awesome-icon icon="fa-solid fa-user-pen" data-bs-toggle="modal" data-placement="top" title="Edit Name" :data-bs-target="'#editmodal' + user.Guid"/>
      <font-awesome-icon icon="fa-solid fa-user-lock" data-bs-toggle="modal" data-placement="top" title="Change Password" :data-bs-target="'#editpasswordModal' + user.Guid"/>
      <font-awesome-icon icon="fa-solid fa-trash" data-bs-toggle="modal" data-placement="top" title="Delete User" :data-bs-target="'#deleteModal' + user.Guid"/>
    </td>
  </tr>
</tbody>

注意：把v-for的key从index改成user.Guid，避免数组变化时组件复用导致的异常。

方案2：过滤时保留原数组索引

如果一定要用索引关联原数组，可以在计算属性中给过滤后的每一项添加原索引字段：

1. 修改计算属性：

computed: {
  filterUserInfo() {
    const lowerValue = this.searchQuery.toLowerCase();
    // 给每个用户添加原数组的索引
    const userWithOriginalIndex = this.userInfo.map((user, originalIndex) => ({
      ...user,
      originalIndex
    }));
    let reactiveArray = userWithOriginalIndex.filter(user => {
      return user.DisplayName.toLowerCase().indexOf(lowerValue) > -1;
    });
    // 排序后返回
    const sortedArray = reactiveArray.length > 0 
      ? reactiveArray.sort((a,b) => a.DisplayName > b.DisplayName ? 1 : -1)
      : userWithOriginalIndex.sort((a,b) => a.DisplayName > b.DisplayName ? 1 : -1);
    return sortedArray;
  },
}

2. 模板中使用原索引取值：

<td>{{ this.userInfo[user.originalIndex].DisplayName }}</td>

同样记得把key改成user.Guid。

额外优化 #

计算属性里的大小写处理可以简化，直接用this.searchQuery.toLowerCase()即可，不用单独处理首字母。

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