Vue.js实现按电影或剧集类型筛选展示内容的方法

安全阿岳

2026-10-3

问题原因

你原来的实现存在3个核心错误：

计算属性不能作为点击事件的回调函数使用，它是依赖响应式变量自动更新的，不需要主动触发
模板里遍历渲染用的是filteredMovies变量，但你没有定义对应的计算属性，写的SerieOrMovie计算属性完全没有被用到
筛选逻辑里你把type转成了全小写，却去匹配大写开头的Series，永远返回空结果

正确实现方案

第一步：新增响应式筛选状态

在你的data中新增筛选状态变量，用来记录当前选中的筛选类型：

data() {
  return {
    // 原有变量（Movies、search、amountFav等）保留，新增以下内容
    currentFilter: 'all' // 可选值 all / movie / series
  }
}

第二步：修改按钮点击绑定

把按钮的点击事件改成修改currentFilter的值：

<div class="NavbarContainer">
  <button @click="currentFilter = 'movie'">Movies</button>
  <button @click="currentFilter = 'series'">Series</button>
  <button id="FavoriteBtn">Favorites ({{amountFav}})</button>
  <input type="text" v-model="search" placeholder="Search..">
</div>

第三步：实现`filteredMovies`计算属性

你需要把筛选逻辑写到模板用到的filteredMovies计算属性里，同时兼容类型筛选和搜索框筛选：

computed:{
  filteredMovies() {
    // 先做类型筛选
    let list = this.Movies
    if (this.currentFilter === 'series') {
      list = list.filter(item => item.type.toLowerCase() === 'series')
    } else if (this.currentFilter === 'movie') {
      list = list.filter(item => item.type.toLowerCase() === 'movie')
    }
    // 叠加搜索关键词筛选
    if (this.search.trim()) {
      const keyword = this.search.trim().toLowerCase()
      list = list.filter(item => item.MovieName.toLowerCase().includes(keyword))
    }
    return list
  }
}