動態過濾Vue.js中的對象數組

Question

我有一個Vue.js應用程序。 在這個應用程序中，我正在嘗試動態地將過濾器值應用於對象Array 。 數組中的每個對象都有字段。 我試圖通過字段值過濾這些對象。 每個字段可以通過多個值進行過濾。

目前，我還沒有成功搞清楚如何進行這種過濾。 我嘗試過使用JavaScript的烘焙filter功能。 但是，這總是為我返回一個空結果集。 我把這個小提琴放在一起，其中包括以下代碼：

new Vue({
  el: '#app',
  data: {
    currentFilterProperty: '',
    currentFilterValue: '',

    cols: [
      { title: 'Name', prop:'name' },
      { title: 'Age', prop:'age' },
      { title: 'Birthday', prop:'birthday' },      
    ],

    dataFilters: [],
    data: [
      { name:'Patricia Miller', age:69, birthday:'04-15-1948' },
      { name:'Bill Baggett', age:62, birthday:'05-07-1955' },      
      { name:'Maxine Thies', age:21, birthday:'11-28-1995' },      
      { name:'Alison Battle', age:65, birthday:'08-07-1952' },      
      { name:'Dick Triplett', age:25, birthday:'08-27-1982' } 
    ]
  },

  methods: {
    addFilter: function() {
      var f = this.dataFilters[this.currentFilterProperty];
      if (!f) {
        this.dataFilters = {};
        this.dataFilters[this.currentFilterProperty] = [ this.currentFilterValue ];
      } else {
        this.dataFilters[this.currentFilterProperty].push(this.currentFilterValue);
      }

      // How to apply filter?
    }
  }
})

我不確定如何將過濾器應用於data對象。

Answer 1

完整解決方案 最佳測試：添加過濾器年齡62，然后生日04-15-1948，然后在名稱Patricia中添加'tri'。

 new Vue({ el: '#app', data: { filteredProperty: 'name', query: '', activeFilters: [], data: [ {name: 'Patricia Miller', age: 62, birthday: '04-15-1948'}, {name: 'Bill Baggett', age:62, birthday: '04-15-1948' }, {name:'Maxine Thies', age:62, birthday:'11-28-1948'}, {name:'Alison Battle', age:65, birthday:'08-07-1952'}, {name:'Dick Triplett', age:25, birthday:'08-27-1982'} ] }, computed: { filtered () { var filtered = this.data this.activeFilters.forEach(filter => { filtered = filtered.filter(record => { return filter.name === 'name' ? new RegExp(filter.value, 'i').test(record[filter.name]) : record[filter.name] == filter.value }) }) return filtered } }, methods: { addFilter () { this.activeFilters.push({ name: this.filteredProperty, value: this.query }) this.query = '' }, removeFilter (idx) { this.activeFilters.splice(idx, 1) } } }) 

 <div id="app"> <div> <select v-model="filteredProperty"> <option value="name">Name</option> <option value="age">Age</option> <option value="birthday">Birthdate</option> </select> <input placeholder="filter value" v-model="query"> <button @click="addFilter">add filter</button> </div> <hr> <table v-if="activeFilters.length"> <tr style="width: 100px"> <th colspan="3">Filters in use:</th> </tr> <tr v-for="(filter, index) in activeFilters" :key="index"> <td>{{ _.capitalize(filter.name) }}:</td> <td>{{ filter.value }}</td> <td style="padding-left: 10px;"> <a href="#" @click.prevented=removeFilter(index)> remove </a> </td> </tr> </table> <hr v-if="activeFilters.length"> <table> <tbody> <tr v-for="(record, index) in filtered" :key="index"> <td style="padding-right:18px;">{{ record.name }}</td> <td style="padding-right:18px;">{{ record.age }}</td> <td>{{ record.birthday }}</td> </tr> </tbody> </table> </div> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/lodash"></script> 

Answer 2

看看下面的代碼。 將您的方法更改為計算屬性，然后過濾器可以自動發生而無需按下按鈕。 小提琴總是按名稱進行過濾，因此您需要進行一些調整以適用於所有過濾條件，但它應該讓您朝着正確的方向前進。

 new Vue({ el: '#app', data: { currentFilterProperty: '', currentFilterValue: '', cols: [ { title: 'Name', prop:'name' }, { title: 'Age', prop:'age' }, { title: 'Birthday', prop:'birthday' } ], data: [ { name:'Patricia Miller', age:69, birthday:'04-15-1948' }, { name:'Bill Baggett', age:62, birthday:'05-07-1955' }, { name:'Maxine Thies', age:21, birthday:'11-28-1995' }, { name:'Alison Battle', age:65, birthday:'08-07-1952' }, { name:'Dick Triplett', age:25, birthday:'08-27-1982' } ] }, computed:{ filteredData(){ var self = this; // Add condition for currentFilterProperty == 'Name' if(this.currentFilterValue != undefined && this.currentFilterValue != ''){ return this.data.filter(function(d){ //alert(d.name + " " + this.currentFilterValue); return d.name.indexOf(self.currentFilterValue) != -1; }); } // else if(currentFilterProperty == 'Date'){ // return this.data.filter(function(d){ //return d.birthday.indexOf(self.currentFilterValue) != -1; // }); else{ return this.data; } } } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.4/vue.min.js"></script> <div id="app"> <div> <select v-model="currentFilterProperty"> <option v-for="c in cols" :value="c.prop">{{c.title}}</option> </select> <input placeholder="filter value" v-model="currentFilterValue" /> </div> <hr /> <table> <tbody> <tr v-for="(record, index) in filteredData"> <td style="padding-right:18px;">{{ record.name }}</td> <td style="padding-right:18px;">{{ record.age }}</td> <td>{{ record.birthday }}</td> </tr> </tbody> </table> </div> 

Answer 3

這是工作解決方案通過檢查captaining條件

 new Vue({ el: '#app', data: { currentFilterProperty: 'name', currentFilterValue: '', filteredData:[], cols: [ { title: 'Name', prop:'name' }, { title: 'Age', prop:'age' }, { title: 'Birthday', prop:'birthday' }, ], dataFilters: [], addFilters:[], data: [ { name:'Patricia Miller', age:69, birthday:'04-15-1948' }, { name:'Bill Baggett', age:62, birthday:'05-07-1955' }, { name:'Maxine Thies', age:21, birthday:'11-28-1995' }, { name:'Alison Battle', age:65, birthday:'08-07-1952' }, { name:'Dick Triplett', age:25, birthday:'08-27-1982' } ] }, methods: { addFilter: function() { if(!this.currentFilterValue){ return false; } var obj = {}; this.addFilters.push({name:this.currentFilterProperty,value:this.currentFilterValue}); this.currentFilterValue = ""; var vm = this; this.dataFilters = this.data //var temp = []; for(var i in vm.addFilters){ this.dataFilters = this.dataFilters.filter(function(a,b){ return ((a[vm.addFilters[i].name]).toString().toLowerCase()).indexOf((vm.addFilters[i].value).toString().toLowerCase()) !== -1; }); } // How to apply filter? } }, mounted(){ this.dataFilters = this.data; } }) 

 <script src="https://unpkg.com/vue"></script> <div id="app"> <div> <select v-model="currentFilterProperty"> <option value="name">Name</option> <option value="age">Age</option> <option value="birthday">Birthdate</option> </select> <input placeholder="filter value" v-model="currentFilterValue" /> <button v-on:click="addFilter"> add filter </button> </div> <div v-for="(filter,index) in addFilters">{{filter.name}} : {{filter.value}}</div> <hr /> <table> <tbody> <tr v-for="(record, index) in dataFilters"> <td style="padding-right:18px;">{{ record.name }}</td> <td style="padding-right:18px;">{{ record.age }}</td> <td>{{ record.birthday }}</td> </tr> </tbody> </table> </div>