尝试在 Vuejs 中使用计算属性过滤数组值时出现问题？

Question

. Answers to this question are eligible for a +50 reputation bounty. Sundar is looking for a .

 <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

Answer 1

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()
      );
    }
  }
});

Answer 2

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 }