let classes = {
menu: [
{ topic: 'math', location: 'adadadas', price: 80, length: "120", time: "9:00", reviewStars: "3" },
{ topic: 'math', location: 'dsadassa', price: 90, length: "70", time: "11:00", reviewStars: "4" },
{ topic: 'math', location: 'dadass', price: 120, length: "30", time: "14:00", reviewStars: "1" },
{ topic: 'english', location: 'dasdsadas', price: 110, length: "45", time: "13:00", reviewStars: "2" },
{ topic: 'english', location: 'fsafasf', price: 90, length: "75", time: "11:00", reviewStars: "4" },
{ topic: 'english', location: 'fafasa', price: 90, length: "100", time: "17:00", reviewStars: "2" },
{ topic: 'english', location: 'fsasada', price: 130, length: "90", time: "15:00", reviewStars: "3" },
{ topic: 'piano', location: 'dsadsadsads', price: 120, length: "", time: "50", time: "13:00", reviewStars: "4" },
{ topic: 'piano', location: 'dsadasddsadsadas', price: 140, length: "40", time: "12:00", reviewStars: "1" }
],
input: {
topic: '',
location: 'All',
topics: 'All',
price: 'All',
reviews: 'All'
},
newAry: [],
otherAry: [],
filterText: null
};
var searchBar = new Vue({
el: '#searchBar',
data: classes,
computed: {
menuArray() {
let vm = this
let array = new Set()
vm.menu.forEach(function (item) {
array.add(item.location)
})
console.log(array)
return vm.newAry = Array.from(array)
},
// More computeds...
filterAryTopic() {
let vm = this
if (vm.input.topic) {
// Handling logic for filtering by topic
} else {
// Return default if no topic is provided
}
},
// More filters...
filterAry() {
let vm = this
// Complete logic for filtering based on all criteria
},
getAry() {
let vm = this
return vm.otherAry
}
},
mounted: function () {
newAry = classes;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="searchBar">
<div class="display-3 text-center my-5 text-secondary">Activities! </div>
<div class="container w-75">
<div class="row mb-3">
<div class="col-md-4">
<div>
<select name="" class="form-control" v-model.trim="input.price">
<option value="All" selected>All</option>
<option :value="item" v-for="item in menuArrayPrice">{{item}}</option>
</select>
<select name="" class="form-control" v-model.trim="input.topics">
<option value="All" selected>All</option>
<option :value="item" v-for="item in menuArrayTopic">{{item}}</option>
</select>
<select name="" class="form-control" v-model.trim="input.reviews">
<option value="All" selected>All</option>
<option :value="item" v-for="item in menuArrayReview">{{item}}</option>
</select>
</div>
</div>
<div class="col-md-8">
<input type="text" name="" class="form-control" v-model.trim="input.topic" placeholder="search topics">
</div>
</div>
</div>
<div class="container w-75 mb-5">
<div class="row">
<div class="col-md-4" v-for="item in filterAry" >
<ul class="course list-group mb-3">
<li class="list-group-item text-accent h4 font-weight-bold">{{item.location}}</li>
<li class="list-group-item text-secondary song-item d-flex flex-column ">
{{item.topic}}{{item.price}}
</ul>
</div>
</div>
</div>
</div>