0๐
โ
If I understood You correctly please take a look at following snippet:
const app = Vue.createApp({
components: {
vSelect: window["vue-select"]
},
data() {
return {
users: [{ id: 1, name: "Aluino", foodType: "Swales", country: "japan", district: "Bigender", projectName:"LineOne" }, { id: 2, name: "Ella", foodType: "Guitton", country: "Panama", district: "Female",projectName:"LineOne" }, { id: 3, name: "Julina", foodType: "Tarbard", country: "USA", district: "Female",projectName:"LineOne" }, { id: 4, name: "Walden", foodType: "Tarbard", country: "Brazil", district: "Male",projectName:"LineOne" }, { id: 5, name: "Hillary", foodType: "Billingsley", country: "Norway", district: "Male",projectName:"LineThree" }, { id: 6, name: "KKK", foodType: "McPhilip", country: "Brazil", district: "JJJ",projectName:"LineOne" }, { id: 7, name: "LLL", foodType: "Billingsley", country: "Norway", district: "Male",projectName:"LineThree" }],
displayUsers: false,
selects: [{name: 'foodType', title: 'Food Type:', model: null}, {name:'country', title: 'Country:', model: null}, {name:'district', title: 'District:', model: null}]
};
},
computed: {
filteredUsers() {
let filtered = this.users;
const isselected = this.selects.filter(s => s.model)
isselected.forEach(s => {
filtered = filtered.filter(user => user[s.name] === this.selects[this.selects.findIndex(i => i.name === s.name)].model);
})
return filtered;
}
},
methods: {
seloptions(type) {
return Array.from(new Set(this.users.map(user => user[type])));
}
},
mounted() {
this.displayUsers = true;
}
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-select@beta"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select/dist/vue-select.css">
<div id="demo">
<div>
<h2>Users</h2>
<div v-for="(sel, i) in selects" :key="i">
<label :for="sel.name">{{ sel.title }}</label>
<v-select
:id="sel.name"
v-model="sel.model"
:options="seloptions(sel.name)"
></v-select>
</div>
<ul v-if="displayUsers">
<li v-for="user in filteredUsers" :key="user.id">
<p>Name: {{ user.name }}</p>
<p>Food Type: {{ user.foodType }}</p>
<p>Country: {{ user.country }}</p>
<p>District: {{ user.district }}</p>
<p>projectName: {{ user.projectName }}</p>
</li>
</ul>
</div>
</div>
Source:stackexchange.com