Issue when trying to filter the array values using computed property in Vuejs?

Question

<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 class="search-wrapper">  
    <input type="text" v-model="search" placeholder="Search title.."/>
        <label>Search Users:</label>
  </div>  
  <ul>
    <li v-for="user in userList"></li>
    <li v-for="manage in manageList"></li>
  </ul>
</div>

const app = new Vue ({
  el: '#app',
  data: {
     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"
        }
      ],
    manageList: [
        {
          id: 1,
          name: "cc",
          status:"ok"
        },
        {
          id: 2,
          name: "aa",
          status:"notok"
        },
        {
          id: 3,
          name: "a",
          status:"ok"
        },
        {
          id: 4,
          name: "vv",
          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
    }
}
})

From multiple v-for, I want to display data initially, later I have two filters where one is for filtering array and second one is for, selecting particular array from dropdown, for all of them I have written some logic, But I not sure how to combine my looping logic in filters, so that it work accordingly?

This is my code link :- https://codepen.io/dhanunjayt/pen/vYeeorm

so you want to first show all details from userList array and manageList in ul. then you want to filter users based on status and name. am I correct? — Arun Sharma
– Arun Sharma, Commented Jan 4, 2022 at 11:12
What do you mean by "combine my looping logic in filters"? It's unclear what the problem is in your code, as it seems to filter just fine. — tony19
– tony19, Commented Jan 6, 2022 at 6:06

Arun Sharma · Accepted Answer · 2022-01-04 11:51:42Z

You don't need to create another array to store search results. Vuejs provided computed property for that.

HTML

<div id="app">
  <div v-if="isLoaded">
    <select v-model="selectNum" name="text">  <!-- HERE -->
      <option value="" selected="selected">Select status</option>
      <option value="ok">ok</option>
      <option value="notok">notok</option>
    </select>
  </div>
  
  <div class="search-wrapper">  
    <input type="text" v-model="search" placeholder="Search title.."/>
    <label>Search Users:</label>
  </div>
  <span>Search Results</span>
  <ul>
    <li v-for="user in search_results">Name:{{user.name}} and Status:{{user.status}}</li>
  </ul>
  <span>All Users</span>
  <ul>
    <li v-for="user in userList">Name:{{user.name}} and Status:{{user.status}}</li>
  </ul>
</div>

JS

const app = new Vue({
  el: "#app",
  data: {
    search: "",
    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"
      }
    ],
    manageList: [
      {
        id: 1,
        name: "cc",
        status: "ok"
      },
      {
        id: 2,
        name: "aa",
        status: "notok"
      },
      {
        id: 3,
        name: "a",
        status: "ok"
      },
      {
        id: 4,
        name: "vv",
        status: "notok"
      }
    ]
  },
  created() {
    this.isLoaded = true;
  },
  computed: {
    search_results: function () {
      let that = this;
      if (that.search.length == 0 && that.selectNum.length == 0) return;
      return this.userList.filter(
        (item) =>
          item.name
            .toLocaleLowerCase()
            .indexOf(that.search.toLocaleLowerCase()) >= 0 &&
          item.status.toLocaleLowerCase() == that.selectNum.toLocaleLowerCase()
      );
    }
  }
});

Dou · Accepted Answer · 2022-01-06 10:14:49Z

0

If i understand your question correcttly.Try this:

search_results: function () {
      let filterList = ['userList','manageList']
      let resultList = []
      let that = this;
      filterList.forEach(filter => {
        const result = that[filter].filter((item) =>
          item.name
            .toLocaleLowerCase()
            .indexOf(that.search.toLocaleLowerCase()) >= 0 &&
          item.status.toLocaleLowerCase() == that.selectNum.toLocaleLowerCase())
    resultList = [...resultList,...result]  
      })
    return resultList
    }

answered Jan 6, 2022 at 10:14

Dou

981 silver badge6 bronze badges

Collectives™ on Stack Overflow

Issue when trying to filter the array values using computed property in Vuejs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related