如何添加按钮来过滤某些数据？

Question

我使用的是 Vue.js 3.0 版本，这是我的代码

<script>
export default {
  data: function () {
    return {
      movies: [
        {
          id: 1,
          title: "They All Lie",
          releaseYear: 1989,
          director: {
            id: 18,
            firstName: "Darci",
            lastName: "Overill",
            nationality: "China",
            birthdate: "07/13/1973",
          },
        },
        {
          id: 2,
          title: "Star Wars",
          releaseYear: 1997,
          director: {
            id: 18,
            title:'john',
            firstName: "Darci",
            lastName: "Overill",
            nationality: "China",
            birthdate: "07/13/1973",
          },
        },
        {
          id: 3,
          title: "Mamma mia",
          releaseYear: 2005,
          director: {
            id: 19,
            title:'vesko',
            firstName: "John",
            lastName: "Smith",
            nationality: "USA",
            birthdate: "07/13/1980",
          },
        },
      ],
    };
  },
  computed: {
    filteredMovies() {
      return this.movies.filter((el) => el.director.title === 'vesko' );
    },
  },
};
</script>

<template>
  <div>
    <div class="row">
      <div class="col"><h1 class="mt-3">List of all Movies</h1></div>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>Movie ID</th>
          <th>Title</th>
          <th>Release Year</th>
          <th>Director ID</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="movie in filteredMovies" :key="movie.id">
          <td>{{ movie.id }}</td>
          <td>{{ movie.title }}</td>
          <td>{{ movie.releaseYear }}</td>
          <td>{{ movie.director.id }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

所以我想在单击时添加一些按钮，我想过滤我的数据。例如，当我单击时名称为 John 的复选框或按钮我只想显示带有导演标题 John 的数据或当有人输入值 John 时的输入字段 我只想要带有标题值 John 的数据。我是 Vue.js 的新手，所以我需要一些帮助

Answer 1

如果您不使用 Vuex，我可能会使用 v-model 来启用/禁用您想要过滤的某些关键字，然后更新您的 filteredMovies 计算函数以返回所选电影。

Demo

<template>
<div>
   <form>
      <input type="checkbox" name="drama" v-model="filters.drama"/>
      <label for="drama">Drama</label>
      
      <input type="checkbox" name="comedy" v-model="filters.comedy"/>
      <label for="comedy">Comedy</label>
      
      <input type="checkbox" name="horror" v-model="filters.horror"/>
      <label for="horror">Horror</label>
   </form>

   <div v-for="(movie, index) in filteredMovies" :key="movie.title + index">
      <div>
        {{ movie.title }}
      </div>
   </div>
</div>
</template>

<script>
  export default {
    data: ()=>({
      filters: {
        drama: true,
        comedy: true,
        horror: true,
      },
      movies: [
        { title: 'Movia A', genres: ['drama', 'comedy']},
        { title: 'Movia B', genres: ['horror', 'comedy']},
      ]
    }),
    computed: {
      filteredMovies(){
        return this.movies.filter( movie => {
          // create an array of the selected genres from this.filter
          let selectedGenres = Object.keys(this.filters).filter(item => this.filters[item] === true)
          // if this movie includes any of the selected genres, then keep it
                    return movie.genres.some(item => selectedGenres.includes(item))
        })
      }
    }
  }
</script>

不确定您的最终目标是什么，但您也可以对文本输入字段执行相同操作。