在 Javascript 中使用 .filter 对数据进行排序

Question

基本上我做错了什么？这是一个计算不足的链式过滤器。错误是“product.topic.sort”不是函数。我正在尝试使用“选择”来选择升序、降序、价格高和价格低的排序选项。V-model 将值绑定到 js。在过滤器下，我正在尝试添加一个基于“值”进行排序的过滤器如果 value = undefined，什么也不做。如果 value = Az，如果 value = Za，则升序，如果 value = Ph，则降序，如果 value = Pl，则价格高，价格低编辑在filteredSearch() {我有其他过滤器下，例如  .filter(product => this.filters.some(filter => product.topic.match(filter))) ||    this.products  .filter(p => p.topic.toLowerCase().match(this.search.toLowerCase()))  .filter(p => p.price <= this.priceFilter)我想确保所有其他过滤器都与排序过滤器一起使用。HTML<div id="app">            <h4>Sort</h4>                  <select v-model="value">                    <option value="Az">Ascending</option>                    <option value="Za">Descending</option>                    <option value="Ph">Price High</option>                    <option value="Pl">Price Low</option>                </select><div class="block" v-for="product in filteredSearch">        <h3>{{product.topic}}</h3>          <p>{{product.price}}</p></div></div>JSvar app = new Vue({            el: '#app',            data: {                products: [{                        "topic": "english",                        "price": "20"                    },                    {                        "topic": "french",                        "price": "60"                    },                    {                        "topic": "science",                        "price": "80"                    }                ],                value: "",            })computed: {filteredSearch() {return this.products.filter((product) => {    if (!this.value)        return true;    if (this.value == "Az") {        return product.topic.sort(function(a, b) {            a.topic - b.topic        });    }})}}});

Answer 1

这是如何执行此操作的示例。因此，我们有一个辅助方法getSorter，它查看您的v-model指令绑定到的当前选定值this.value，并返回一个适当的函数以传递给基于该值的排序。如果没有选择任何内容，它将返回null。

在您的计算属性中filteredSearch，您可以根据需要应用现有的过滤器，然后对其结果进行排序。

methods: {

    // determine the sorting function to use

    getSorter() { 

      switch (this.value) {

        case 'Za':

          return (a,b) => b.topic > a.topic ? 1 : a.topic == b.topic ? 0 : -1;

        case 'Az':

          return (a,b) => b.topic > a.topic ? -1 : a.topic == b.topic ? 0 : 1;

        case 'Ph':

          return (a,b) => b.price - a.price;

        case 'Pl':

          return (a,b) => a.price - b.price;

        default:

          return null;

      }

    }

  },

  computed: {

    filteredSearch: function() { 

      // apply existing filter logic

      var filteredProducts = this.products

        .filter((el) => true); // replace with your existing filter conditions here

      // apply sort function

      var sortFunction = this.getSorter();

      return sortFunction ? filteredProducts.sort(sortFunction) : filteredProducts;

    }

  }

Answer 2

我认为你不应该在计算属性函数中使用过滤器，最好只做这样的排序

filteredSearch() {

return !this.value ? 

        true 

        : this.value == "Az" ? 

        this.products.sort((a, b) => a.topic > b.topic ? 1 : -1)

        : this.value == "Za" ?

        this.products.sort((a, b) => a.topic < b.topic ? 1 : -1)

        : this.value == "Pl" ? 

        this.products.sort((a, b) => a.price - b.price)

        : this.value == "Ph" ?

        this.products.sort((a, b) => b.price - a.price)

        : null;

}