Vue.js 2 + Axios实现搜索功能：API数据过滤报错问题

听起来你遇到的是异步数据加载和计算属性执行时机的矛盾问题——虽然最终Vue开发者工具里能看到计算属性拿到了电影数组，但组件初始化时的执行顺序导致它先尝试对undefined调用filter了。我来帮你拆解下原因和解决办法：

核心原因 #

你的fetchFilms是基于Axios的异步请求，而Vue的计算属性会在组件初始化阶段就自动执行一次。这时候异步请求还没完成，this.films还是初始的undefined，自然就会抛出“Cannot read property 'filter' of undefined”的错误。等请求完成后films被赋值，计算属性会自动更新，但初始的错误已经触发了。

具体解决办法 #

1. 初始化films为空数组 #

在组件的data选项里，把films初始化为空数组，而不是默认的undefined：

data() {
  return {
    films: [], // 这里设置为空数组，而非不定义或设为undefined
    searchString: ''
  }
}

这样即使异步请求还没完成，计算属性调用this.films.filter()时，操作的是一个空数组，不会触发错误。

2. 在计算属性中添加空值判断 #

如果不想修改初始值，也可以在计算属性里先检查films是否存在，再执行过滤逻辑：

computed: {
  filteredFilms() {
    // 先判断films是否有效，无效则返回空数组
    if (!this.films) return [];
    return this.films.filter(film => {
      return film.title.toLowerCase().includes(this.searchString.toLowerCase())
    })
  }
}

或者用ES6可选链操作符简化（需要环境支持该语法）：

computed: {
  filteredFilms() {
    return this.films?.filter(film => {
      return film.title.toLowerCase().includes(this.searchString.toLowerCase())
    }) || []
  }
}

3. 模板中添加加载状态判断 #

如果你的模板直接使用了filteredFilms，也可以在渲染前判断films是否已加载完成，避免初始渲染时的错误：

<template>
  <div v-if="films.length">
    <!-- 渲染过滤后的电影列表 -->
    <div v-for="film in filteredFilms" :key="film.id">{{ film.title }}</div>
  </div>
  <div v-else>加载中...</div>
</template>

这几个方法都能解决你遇到的矛盾问题——毕竟Vue开发者工具展示的是请求完成后的状态，而错误发生在请求完成前的初始渲染阶段。

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