在Vue.js 2.0中過濾兩個或兩個以上的列表

由於在2.0版本中，您不能再將多個管道過濾器鏈接到一個列表（|filterBy等），您應該如何在計算屬性中執行此操作兩個或更多選擇下拉菜單？在Vue.js 2.0中過濾兩個或兩個以上的列表

我想要按照專輯標題（從選擇1）和按年份（選擇2）進行排序的功能。

<select v-model="albumFilter"> 
    <option value="All">All</option> 
    <option value="Album 1">Album 1</option> 
    <option value="Album 2">Album 2</option> 
    <option value="Album 3">Album 3</option> 
</select> 

<select v-model="yearFilter"> 
    <option value="Year">Year</option> 
    <option value="2017">2017</option> 
    <option value="2016">2016</option> 
    <option value="2015">2015</option> 
</select> 

<ul> 
    <li v-for="review in filterByAlbum" v-if="review.type === 'recordReview'"> 
     <a :href="review.jsonUrl"> 
      [[ review.title ]] 
     </a> 
    </li> 
</ul>

Vue的js代碼：

data() { 
    return { 
     pressEntries: [], 
     albumFilter: 'All', 
     yearFilter: 'Year' 
    } 
}, 

filterByAlbum: function() { 

    // Select 1 (Album Filter) 
    switch (this.albumFilter) { 
     case 'All': 
      return this.pressEntries; 
      break; 

     case 'Neither': 
      return this.pressEntries.filter(entry => { 
       return entry.relatedRecording === null 
      }); 
      break; 

     default: 
      return this.pressEntries.filter(entry => { 
       return entry.relatedRecording === this.albumFilter 
      });  
    } 

    // Select 2 (Year Filter) 
    if (this.yearFilter === 'Year') { 
     return this.pressEntries; 
    } 
    else { 
     return this.pressEntries.filter(entry => { 
      let postDate = new Date(entry.postDate.date); 
      return JSON.stringify(postDate.getFullYear()) === this.yearFilter; 
     }); 
    } 
}

的pressEntries數據模型從API，這是我沒有打擾包括代碼獲取數據。每個選擇過濾器的每個代碼塊都獨立工作，但不在一起。

如果v-for迴路filterByAlbum引用計算屬性，然後回指pressEntries數據模型，那會是可能有兩個計算性能，所述v-for貫穿（如「filterByAlbum」和「'filterByYear` 「例如）？或者我需要弄清楚如何過濾一個大規模計算屬性中的所有結果？

來源

2017-03-08 Ryan

下面是一個計算結果的例子。您也可以將albumFilter和yearFilter移動到他們自己的方法中。基本上使用這種技術，你可以根據需要組裝儘可能多的過濾器。我不得不猜測你的數據結構，但這裏是一個working example。

來源

2017-03-09 02:47:54 Bert

嗨，如果我要算表演項目。怎麼做？謝謝 –

@KemBardly你的意思是你想要計算出來的過濾器的項目？ – Bert

是的，我想做分頁請幫忙 –

這是我的解決方案：您可以輕鬆地添加3選擇框

https://codepen.io/anon/pen/PjOoEN

function() { 
    var vm = this; 
    var category = vm.selectedCategory; 
    var gender = vm.selectedGender; 

    if(category === "All" && gender === "All") { 
     return vm.people; 
    } else { 
     return vm.people.filter(function(person) { 
      return (category === 'All' || person.category === category) && (gender === 'All' || person.gender === gender);  
     }); 
    } 
}

來源

2017-06-26 21:38:55 Megafry

嗨，如果我想數表演項目。怎麼做？謝謝 –

在Vue.js 2.0中過濾兩個或兩個以上的列表

回答

相關問題