[Vuejs]-VUE3 select dropdown filtering from an array/JSON

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>

Leave a comment