Vue 2搜索过滤器单选按钮状态更新后渲染异常求助

问题描述 #

在Vue 2 + Vuetify实现的搜索过滤列表中，搜索某一项并点击单选按钮切换默认状态后，清空搜索框，列表的单选状态无法正确更新；仅点击初始未过滤的列表项时，单选按钮状态才能正常切换。

问题根源 #

1. 索引匹配错误：v-for遍历的是过滤后的filteredItems，此时的index是过滤后数组的索引，而非原items数组的索引。在changeDefault中用该索引修改原数组，会定位到错误元素，导致状态修改逻辑混乱。
2. 字符串匹配逻辑缺陷：使用match做匹配时，若搜索词含正则特殊字符会引发意外，且未统一转为小写，存在大小写敏感问题。
3. 缺少v-for唯一标识：未给v-for元素添加key，Vue虚拟DOM复用逻辑可能异常，导致渲染更新不及时。

解决方案 #

1. 修正状态切换逻辑，直接操作item对象

无需依赖索引，直接通过传入的item对象修改状态，同时重置原默认项：

changeDefault(item) {
  // 找到原默认项并重置
  const prevDefaultItem = this.items.find(i => i.default === true);
  if (prevDefaultItem) {
    prevDefaultItem.default = false;
  }
  // 设置当前项为默认
  item.default = true;
}

同步修改模板中的点击事件，不再传递index：

<input
  type="radio"
  :checked="item.default"
  @click="changeDefault(item)"
/>

2. 优化搜索过滤的匹配逻辑

将match改为includes，同时统一转为小写，避免大小写敏感问题：

filteredItems() {
  if (this.search) {
    const lowerSearch = this.search.toLowerCase();
    return this.items.filter((item) => {
      return item.name.toLowerCase().includes(lowerSearch);
    });
  } else {
    return this.items;
  }
},

3. 给v-for添加唯一key

为v-for根元素添加唯一标识的key，帮助Vue正确追踪元素变化：

<div v-for="(item) in filteredItems" :key="item.name">

若后续存在重名可能，建议给每个item添加唯一id属性，用item.id作为key。

完整修正后的代码 #

<template>
  <v-app>
    <v-main>
      <v-text-field v-model="search" label="查找名称..."></v-text-field>
      <div v-for="(item) in filteredItems" :key="item.name">
        <div style="display: flex">
          <input
            type="radio"
            :checked="item.default"
            @click="changeDefault(item)"
          />
          <h1>{{ item.name }}</h1>
        </div>
      </div>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data: () => ({
    search: '',
    items: [
      {
        default: true,
        name: 'Text 1',
      },
      {
        default: false,
        name: 'Text 2',
      },
      {
        default: false,
        name: 'Text 3',
      },
      {
        default: false,
        name: 'Text 4',
      },
    ],
  }),
  methods: {
    changeDefault(item) {
      const prevDefaultItem = this.items.find(i => i.default === true);
      if (prevDefaultItem) {
        prevDefaultItem.default = false;
      }
      item.default = true;
    },
  },
  computed: {
    filteredItems() {
      if (this.search) {
        const lowerSearch = this.search.toLowerCase();
        return this.items.filter((item) => {
          return item.name.toLowerCase().includes(lowerSearch);
        });
      } else {
        return this.items;
      }
    },
  },
};
</script>

内容的提问来源于stack exchange，提问作者Pablo Carrero Garcia