javascript - 如何在 vue.js 中对计算属性进行排序

Question

我不知道如何对已经计算的结果数组进行排序。

在 Vue 中，我按比例过滤图像。现在我想按日期、名称或任何可能的方式对各个结果进行排序。

我尝试使用方法对数组进行排序，但该解决方案不会自动重新计算并动态显示排序结果。

  data() {
    return {
      results: [],
      imgProperties: {
        imgId: [],
        imgRatio: [],
        imgCreateDate: []
      }
    };
  },
  computed: {
    resultsFiltered() {
      if (this.sliderVal == 0) {
        return this.results;
      } else {
        const obj = [];
        const arr = [];
        for (let i = 0; i < this.ratioIndeces.length; i++) {
          const element = this.ratioIndeces[i];
          obj.push(this.results[element]);
          arr.push(this.imgProperties.imgRatio[element]);
        }
        return obj;
      }
    }
  },

这里没有看到排序方法。

我想知道如何或从哪里开始。

代码示例显示了当前结构的摘录。该比率在方法中计算。

我想按 imgCreateDate 和 imgRatio 对数组进行排序。

Answer 1

按 imgRatio 排序的示例:

<p v-for="result in resultsFiltered | orderBy 'imgRatio'">{{ result.imgRatio }}</p>

或

<p v-for="result in resultsFiltered">{{ result.imgRatio }}</p>

computed: {
    resultsFiltered() {
      if (this.sliderVal == 0) {
        return this.results.sort((a, b) => { return b.imgRatio - a.imgRatio;});
      } else {
        const obj = [];
        const arr = [];
        for (let i = 0; i < this.ratioIndeces.length; i++) {
          const element = this.ratioIndeces[i];
          obj.push(this.results[element]);
          arr.push(this.imgProperties.imgRatio[element]);
        }

        return this.obj.sort((a, b) => { return b.imgRatio - a.imgRatio;});
      }
    }
  },

对于Vue2，您可以引用here