How to filter array with multiple conditions in Vuejs?-CodePudding

const app = new Vue({
  el: '#app',
  data: {
    search: '',
    itemsList: [],
    isLoaded: false,
    selectNum: status,
    userList: [{
        id: 1,
        name: "Prem",
        status: "ok"
      },
      {
        id: 2,
        name: "Chandu",
        status: "notok"
      },
      {
        id: 3,
        name: "Shravya",
        status: "ok"
      },
      {
        id: 4,
        name: "kirt",
        status: "notok"
      }
    ]
  },
  created() {
    vm.itemsList = [];
    vm.isLoaded = true;
  },
  computed: {
    filteredAndSorted() {
      // function to compare names  
      function compare(a, b) {
        if (a.name < b.name) return -1;
        if (a.name > b.name) return 1;
        return 0;
      }

      return this.userList.filter(user => {
        return user.name.toLowerCase().includes(this.search.toLowerCase()) &&
          user.status === this.selectNum
      }).sort(compare)
    }
  }
})

<div id="app">
  <div v-if="isLoaded">
    <select v-model="selectNum" name="text">
      <option :value="status">ok</option>
      <option :value="status">notok</option>
    </select>
  </div>
  <div >
    <input type="text" v-model="search" placeholder="Search title.." />
    <label>Search Users:</label>
  </div>
  <ul>
    <li v-for="user in filteredAndSorted">{{user.name}}</li>
  </ul>
</div>

I am trying to achieve functionality like,

Initially the array will be loaded with the help of v-for. At the top I have two options called search-bar and dropdown. Where With the help of those I am trying to filler the array.

Where with search-bar, I want to filter array values. With dropdown, I want to filter the status present in each array.

Code:- https://codepen.io/dhanunjayt/pen/vYeeorm

CodePudding user response：

try like following snippet:

const app = new Vue ({
  el: '#app',
  data() {
    return {
      search: '',
      itemsList: [],
      isLoaded: false,
      selectNum: '',
      userList: [
        {
          id: 1,
          name: "Prem",
          status:"ok"
        },
        {
          id: 2,
          name: "Chandu",
          status:"notok"
        },
        {
          id: 3,
          name: "Shravya",
          status:"ok"
        },
        {
          id: 4,
          name: "kirt",
          status:"notok"
        }
      ]
    }
  },
  created(){
    this.isLoaded = true;
  },
  computed: {
    filteredAndSorted(){
     function compare(a, b) {
       if (a.name < b.name) return -1;
       if (a.name > b.name) return 1;
       return 0;
     }
     const res = this.userList.filter(user => {
          return user.name.toLowerCase().includes(this.search.toLowerCase())
       }).sort(compare)
     if (this.selectNum) {
       return res.filter(user => user.status === this.selectNum )
     }
     return res
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-if="isLoaded">
    <select v-model="selectNum" name="text"> 
      <option value="" selected="selected">Select status</option>
      <option value="ok">ok</option>
      <option value="notok">notok</option>
    </select>
  </div>
  <div >  
    <input type="text" v-model="search" placeholder="Search title.."/>
        <label>Search Users:</label>
  </div>  
  <ul>
    <li v-for="user in filteredAndSorted">{{user.name}}</li>
  </ul>
</div>

CodePudding user response：

The code is error at line 25

// ...
  created(){
    var vm = this;
    vm.itemsList = [];  // => j is undefined
    vm.isLoaded = true;
  },
// ...

CodePudding user response：

First, please check your web console for errors. You should see an error indicating that the variable j is not defined. If, for instance, we change the line vm.itemsList = j; to vm.itemsList = [];, then suddenly the code in your codepen example starts working.

As for the actual problem you want help with, as detailed in follow-up comments to the original answer above, please note that you are not presently utilizing the dropdown value in your filtering logic. You would do so by doing something like this:

filteredAndSorted() {
  // function to compare names
  function compare(a, b) {
    if (a.name < b.name) return -1;
    if (a.name > b.name) return 1;
    return 0;
  }

  return this.userList.filter(user => {
    return user.name.toLowerCase().includes(this.search.toLowerCase()) && user.id === this.selectNum
  }).sort(compare)
}

Additionally, change each <option> to utilize v-binding syntax, like the following:

<option :value="4">4</option>

This will ensure that the value is treated as an integer, not as a string.