Hello, I am currently new to working with Vue.js and I am attempting to create two filters - one for price range and the other for genre. Any guidance or assistance would be greatly appreciated. Below is a snippet of my code:
ul class="filter-wrapper">
<li v-for="el in genreList" v-bind:key="el">
<a
href="#"
data-filter=".el.toLowerCase()"
onclick="genreFilter(el)"
>{{ el }}</a>
</li>
<h3>Filter By Price Range</h3>
<label for="vol">Price (between 0 and 3):</label>
<input type="range" v-model="range" min="0" max="3" step="0.5" />
Selected :
{{
range
}}
<h1 v-for="el in filterRestosByRange" v-bind:key="el">
{{ el }}
</h1>
</ul> export default {
name: "Home",
data() {
return {
restoFeed: [],
searchString: "",
genre: ""
};
},
async created() {
this.restoFeed = await api.getRestaurantsList();
},
computed: {
filterRestosByRange: function() {
return this.restoFeed.items.filter(function(item) {
item.price_range > 0 && item.price_range < this.range ? item.name : "";
});
},
filterProductsByCategory: function() {
return this.restoFeed.items.filter(
item => !item.genres.indexOf(this.genre)
);
}, If you would like to access the API link, please visit: