Vue.js搜索返回正确结果但列表不刷新 报null读取id属性TypeError

开发包含创作者名称搜索功能的Vue应用时，列表首次加载可正常展示全量创作者数据，但触发按名称搜索后：

• 接口返回结果正确，搜索方法内的console.log可以打印出正确的搜索结果
• 页面不刷新，始终展示首次加载的全量创作者列表
• 浏览器控制台抛出错误：

TypeError: Cannot read properties of null (reading 'id')

涉及的核心代码如下：

搜索框代码 #

<input
  type="text"
  placeholder="Search by artistName"
  v-model="artistName"
/>
<button
  @click="searchArtistName"
>
  Search
</button>

搜索逻辑代码 #

data() {
  return {
    creators: [],
    currentCreator: null,
    currentIndex: -1,
    artistName: "",
    errors: [],
  };
},
methods: {
  searchArtistName() {
    DataService.findByArtistName(this.artistName)
      .then((response) => {
        this.creators = response.data;
        console.log(this.creators);
      })
      .catch((e) => {
        console.log(e);
      });
  },
},

列表渲染代码 #

<ul>
  <li
    :class="{ active: index == currentIndex }"
    v-for="(item, index) in creators"
    :key="index"
    @click="setActiveCreator(item, index)"
  >
    id: {{ item.id }}, {{ item.artistName }}
  </li>
</ul>

该问题的核心原因是：Vue的视图更新流程因JS报错中断了。
虽然接口回调中已经把新的搜索结果赋值给了this.creators，控制台也能打印出正确的新数据，但Vue在触发虚拟DOM重渲染的过程中，代码尝试读取null值的id属性抛出异常，导致整个渲染流程终止，新的列表数据没有被同步到页面DOM上，所以始终看到初始加载的旧列表。
结合贴出的代码，具体触发报错的诱因有两个：

• 搜索赋值新的creators列表时，没有重置旧的选中状态：之前用户点击列表项后，currentIndex、currentCreator保存的是旧列表对应的选中值，新的搜索结果列表长度、内容和旧列表不一致时，模板里绑定的选中逻辑、或者未贴出的当前选中创作者详情渲染逻辑，会尝试访问不存在/为null的创作者对象的id属性，直接抛错。
• 用数组索引作为v-for的key，当列表整体替换时，Vue的虚拟DOM diff算法会错误复用旧的DOM节点，放大状态不匹配的问题。

按以下步骤修改即可解决问题：

• 搜索成功后同步重置选中状态
  在searchArtistName方法的接口成功回调里，赋值完新的creators列表后，立刻重置旧的选中状态；如果需要默认选中搜索结果的第一项，增加数组长度判断避免空数组取值异常：

searchArtistName() {
  DataService.findByArtistName(this.artistName)
    .then((response) => {
      this.creators = response.data;
      // 先重置旧选中状态
      this.currentIndex = -1;
      this.currentCreator = null;
      // 可选：搜索有结果时默认选中第一项
      if (this.creators.length) {
        this.currentIndex = 0;
        this.currentCreator = this.creators[0];
      }
    })
    .catch((e) => {
      console.log(e);
    });
},

• 模板中所有访问对象属性的位置增加空值保护
  检查所有用到.id的模板代码，尤其是渲染currentCreator相关内容的区域，加空值判断避免访问null/undefined的属性：
  • 如果是直接渲染变量，用可选链操作符：{{ currentCreator?.id }}
  • 如果是整块区域依赖选中对象，用v-if控制渲染时机：

<div v-if="currentCreator">
  <p>当前选中创作者ID：{{ currentCreator.id }}</p>
  <p>创作者名称：{{ currentCreator.artistName }}</p>
</div>

• 替换v-for的key为唯一业务主键
  把列表渲染的:key="index"改成用创作者的唯一id作为key，避免列表替换时DOM复用错误：

<ul>
  <li
    :class="{ active: index == currentIndex }"
    v-for="(item, index) in creators"
    :key="item.id"
    @click="setActiveCreator(item, index)"
  >
    id: {{ item.id }}, {{ item.artistName }}
  </li>
</ul>

修改完成后，渲染流程不会再因为空值抛错中断，新的搜索结果就能正常渲染到页面上。

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