如何对 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

如果您的计算属性使用数据属性来控制排序，您可以这样做。首先，我创建了包含原始未排序数据和当前排序的数据：

  data: {
    origItems:[
      {name:'ray', age:10},
      {name:'apple', age:20},
      {name:'zula', age:9},
    ],
    sortType:''
  },

然后我根据 sortType:

构建了我的 return 计算值

  computed:{
    items() {
      if(this.sortType === '') return this.origItems;
      if(this.sortType === 'name') {
        return this.origItems.sort((a,b) => {
          if(a.name < b.name) return -1;
          if(a.name > b.name) return 1;
          return 0;
        });
      }
      if(this.sortType === 'age') {
        return this.origItems.sort((a,b) => {
          if(a.age < b.age) return -1;
          if(a.age > b.age) return 1;
          return 0;
        });
      }
    }

这可能会写得更紧凑。我使用此布局进行测试：

<div id="app" v-cloak>
  <button @click="sort('name')">Sort by Name</button>
  <button @click="sort('age')">Sort by Age</button>
  <ul>
    <li v-for="item in items">{{ item.name}} - {{ item.age }}</li>
  </ul>
</div>

您可以在此处查看在线示例：https://codepen.io/cfjedimaster/pen/eYYMVWr?editors=1011

Answer 2

按 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

Answer 3

这是我最新的筛选结果并同时按参数对结果进行排序的方法：

computed: {
  resultsFiltered () {
    return this.built.dataset.filter(img => {
      return this.customFilters.every(key => {
        const parameter = this.params[key]
        const args = parameter.map(val => this.customInputs[val]).slice(1)
        return filterMenus[key](img[parameter[0]], ...args)
      })
    }).sort(this.sortings[this.sortDirection][this.sortType])
  }
},

单个元素：

built.datatset = 是一个对象数组。每个 img 都是一个对象。

customFilters = 是一个带有过滤器选项的数组。像 'ratio' 或 'keyword'。所以我可以用列表中的每个键进行过滤。

customInputs = 用户输入的任何内容。日期范围、比率、关键字、年份...

sortings = 比较 img1 和 img2

sortDirection = 向上或向下。喜欢 'img2.ratio - img1.ratio'

sortType = 按字母、数字、按日期或重置为默认视图

如何对 vue.js 中的计算属性进行排序

How to sort a computed property in vue.js

javascript

vue.js

sorting

vuejs2

computed-properties

如何对 vue.js 中的计算 属性 进行排序

How to sort a computed property in vue.js

javascript

vue.js

sorting

vuejs2

computed-properties

如何对 vue.js 中的计算属性进行排序