[Vuejs]-Vue.js filter table

by

0👍

✅

What if you change the tr to:

 <tr v-for="movie in movies" :key="movie.id" v-if="movie.director.id === 18">

UPDATE
We wrote at the same time with @tuhin47.

I prefer his way to be honest with only a minor change in computed.
I changed the el to movie just to be more clear 🙂

computed: {
    filteredMovies() {
      return this.movies.filter((movie) => movie.director.id === 18);
    },
  },

0👍

You can use a computed property for filtering data and v-for the filtered data.
Here is the codesandbox

<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>

Here is the computed property:

computed: {
    filteredMovies() {
      return this.movies.filter((el) => el.director.id === 18);
    },
  },

Leave a comment