Vue Js按电影或系列方法筛选

<template>
  <div>
    <select v-model="selectedGenre">
      <option value="">所有类型</option>
      <option v-for="genre in genres" :value="genre">{{ genre }}</option>
    </select>

    <ul>
      <li v-for="movie in filteredMovies" :key="movie.id">
        {{ movie.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: [
        { id: 1, title: "电影1", genre: "喜剧" },
        { id: 2, title: "电影2", genre: "动作" },
        { id: 3, title: "电影3", genre: "爱情" },
        { id: 4, title: "电影4", genre: "科幻" }
      ],
      selectedGenre: "",
    };
  },
  computed: {
    genres() {
      // 获取所有电影的类型列表
      return Array.from(new Set(this.movies.map(movie => movie.genre)));
    },
    filteredMovies() {
      // 根据选择的类型筛选电影
      if (this.selectedGenre) {
        return this.movies.filter(movie => movie.genre === this.selectedGenre);
      } else {
        return this.movies;
      }
    }
  }
};
</script>