将参数传递给 Vue.js 中的 .sort 函数答案

【问题标题】：Passing parameters to .sort function in Vue.js将参数传递给 Vue.js 中的 .sort 函数
【发布时间】：2021-04-19 14:29:03
【问题描述】：

我正在为我的 Vue.js 应用程序创建一个按选择排序的选项，并试图弄清楚如何将选定的值传递给计算函数。我可以让函数使用数组中的硬编码值进行排序，但我想提前通过用户输入传递排序顺序，例如按“价格”排序

通过一些研究，我发现了一些关于传递值的帖子，但无济于事。任何帮助将不胜感激。

工作代码

computed: {
    computedObj() {
    
      return this.endpg
        ? this.filteredList.slice(this.startpg, this.endpg)
        : this.lists;
        /* return _.orderBy(this.users, 'name') */
    },
      filteredList() {
      return this.lists.filter((item) => {
        return (
          item.address.toLowerCase().includes(this.search.toLowerCase()) &&
          (this.selectBedrooms.length === 0 || this.selectBedrooms.includes(item.bedrooms))
        );
      }).sort(function (a, b) {return a.price - b.price})   
    },  
},

迄今为止尝试了所有人的代码，但没有任何乐趣。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

你可以像这样传递 selectSort

filteredList() {
  return selectSort => {
      return this.lists.filter((item) => {
        return (
          item.address.toLowerCase().includes(this.search.toLowerCase()) &&
          (this.selectBedrooms.length === 0 || this.selectBedrooms.includes(item.bedrooms))
        );
      }) .sort(function (a, b) {return a[selectSort] - b[selectSort]}) 
    }
  }

这就是你的称呼

filteredList('price')

通过这种方式，您传递的任何值都将被捕获到计算属性的 selectSort 变量中

【讨论】：

@insomniac22 - 太好了！如果它对您有用并且您很高兴-那么通常您会接受答案。这不仅会帮助其他人解决同样的问题，而且还意味着人们将来更有可能帮助您解决您遇到的任何其他问题。您可以在此处阅读有关接受的信息：stackoverflow.com/help/accepted-answer
感谢您的回答，我知道一旦解决了就会批准答案。我查看了代码并尝试了一些东西，但最终它把我的整个页面扔了出去。我将此数据传递给使用切片函数的分页函数，该函数现在失败了。 ``` 返回 this.endpg ？ this.filteredList.slice(this.startpg, this.endpg) : this.lists;``` 我正在学习所以请耐心等待。
好的，如果您还有其他问题，请随时发布...顺便说一句，我希望您的基本问题（即）将参数传递给计算属性是固定的 :)
我无法让代码工作，我已经用函数和对更新数据分页的函数更新了上面的代码，但问题仍然在于排序函数，应该很烦人简单。

【解决方案2】：

将您的selectSort 放入组件数据中，如果在计算中使用，它将在每次值更改时重新评估

那么你的计算函数应该是

filteredList() {
      return this.lists.filter((item) => {
        return (
          item.address.toLowerCase().includes(this.search.toLowerCase()) &&
          (this.selectBedrooms.length === 0 || this.selectBedrooms.includes(item.bedrooms))
        );
      }) .sort(function (a, b) {return a[this.selectSort] - b[this.selectSort]})  
    },

【讨论】：

感谢您的建议，这会产生错误：208:16 错误 'selectSort' 已定义但从未使用过。我在计算中使用该函数：我对组件数据注释的意思有点迷茫，我将在下拉选择的后面使用此代码，因此我很高兴它可以根据用户输入进行更改。是这个意思吗？
更新后的代码伙伴仍然出现同样的错误。

【解决方案3】：

我为这个问题找到了一个很好的解决方案，https://codesandbox.io/s/oq397npryq?file=/src/components/Products.vue:110-126

使用一组 const 项来填充排序函数。

【讨论】：