Question

因为在Vue 2.0中，您不能再将多个管道过滤器链接到一个列表（|filterBy等），如果您有两个或更多选择下拉列表，您应该如何在计算属性中执行此操作？

我想要能够按专辑标题（从选择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获取数据，我没有费心，包括代码。每个选择过滤器的每个代码块都可以自己工作，但不能一起使用。

如果filterByAlbum循环中的v-for引用计算属性，然后返回pressEntries数据模型，那么可能有两个计算属性{{1} 1}}贯穿（例如“v-for”和“'filterByYear`”）？或者我是否需要弄清楚如何在一个大型计算属性中过滤所有结果？

Answer 1

这是一个可行的计算示例。您也可以将static const double table[20 /* for t2*/][20 /*for t3*/] = { {1.25, 1.28, ..., 1.54}, {1.22, 1.25, ..., 1.47}, ... }; static const double t2s[20] = {1, 1.31, ..., 7}; static const double betas[20] = {0.6, 0.56, ..., 0.01}; int compute_t2_index(double t2) { auto it = std::lower_bound(std::begin(t2s), std::end(t2s), t2); // so *(it - 1) <= t2 < *it return std::distance(std::begin(t2s), it); // you might want to choose the nearest value between *(it - 1) and *it // Don't forget to check it with std::begin(t2s) in that case } int compute_beta_index(double t2, double t3) { const auto t2_index = compute_t2_index(t2); const auto& ratios = table[t2_index]; const auto ratio = t3 / t2; auto it = std::lower_bound(std::begin(ratios), std::end(ratios), ratio); // so *(it - 1) <= ratio < *it return std::distance(std::begin(ratios), it); // you might want to choose the nearest value between *(it - 1) and *it // Don't forget to check it with std::begin(ratios) in that case } double compute_beta(double t2, double t3) { return betas[compute_beta_index(t2, t3)]; }和albumFilter移动到自己的方法中。基本上使用这种技术，您可以根据需要组合尽可能多的过滤器。

yearFilter

我不得不猜测你的数据结构，但这里是working example。

Answer 2

这是我的解决方案：您可以轻松添加3 Selectbox

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

在Vue.js 2.0

2 个答案: