i want to create a filter were when the user clicks on the Series Button only series will be shown on the website. screenshot project
Movies:[
{MovieName: 'La Casa de Papel',rating: 9,type:'Series', imgPath: 'lacasadePapel.png'},
{MovieName: 'Venom (2018)',rating: 7, type:'Movie', imgPath: 'Venom.png'},
]
<div class="NavbarContainer">
<button>Movies</button>
<button @click="SerieOrMovie">Series</button>
<button id="FavoriteBtn">Favorites ({{amountFav}})</button>
<input type="text" v-model="search" placeholder="Search..">
</div>
<div class="MoviesContainer">
<div class="Movies" v-for="(movie,index) in filteredMovies" :id="index">
<img class="image_img" :src="require('../assets/MoviesMap/' + movie.imgPath)">
<div class="image_Overlay">
<button @click="addedMovie">Add to Favorites</button>
<button>Watch {{movie.MovieName}}</button>
</div>
</div>
</div>
here is what i tried to do but doesnt work
computed:{
SerieOrMovie(){
return this.Movies.filter((Movies) =>{
return Movies.type.toLowerCase().match('Series')
})
},
Im not sure exactly what you want to accomplice.
This will give you all series:
computed: {
Series() {
return this.Movies.filter((Movies) => Movies.type == "Series")
}