made filter and sort options clickable

This commit is contained in:
supertiger1234 2019-09-05 20:49:16 +01:00
parent 73f76a6b7b
commit cb637bbd64

View file

@ -4,16 +4,25 @@
<div class="filter"> <div class="filter">
<div class="title">Filter:</div> <div class="title">Filter:</div>
<div class="filter-item"> <div class="filter-item">
<div class="item">All</div> <div
<div class="item selected">Verified</div> class="item"
v-for="(filter, index) in filters"
:class="{selected: filterSelected === index}"
:key="filter.name"
@click="filterSelected = index"
>{{filter.name}}</div>
</div> </div>
</div> </div>
<div class="filter"> <div class="filter">
<div class="title">Sort By:</div> <div class="title">Sort By:</div>
<div class="filter-item"> <div class="filter-item">
<div class="item selected">Most Users</div> <div
<div class="item">Least Users</div> class="item"
<div class="item">Date Added</div> v-for="(sortBy, index) in sortBys"
:class="{selected: sortSelected === index}"
:key="sortBy.name"
@click="sortSelected = index"
>{{sortBy.name}}</div>
</div> </div>
</div> </div>
</div> </div>
@ -28,9 +37,19 @@ export default {
props: ["name"], props: ["name"],
data() { data() {
return { return {
filters: [
} { name: "All", param: "All" },
{ name: "Verified", param: "verified" }
],
sortBys: [
{ name: "Alphabetical", param: "alphabetical" },
{ name: "Most Users", param: "most_users" },
{ name: "Least Users", param: "least_users" },
{ name: "Date Added", param: "date_added" }
],
filterSelected: 1,
sortSelected: 0
};
} }
}; };
</script> </script>