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

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

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

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

data（）{
返回{
结果：[]，
IMG属性：{
imgId:[]，
免费：[]，
imgCreateDate:[]
}
};
},
计算：{
resultsFiltered（）{
如果（this.sliderVal==0）{
返回此结果；
}否则{
常量obj=[]；
常数arr=[]；
for（设i=0；i

这里没有分类方法

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

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

---

我想按

imgCreateDate

和

imgRatio

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

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

然后，我根据sortType构建了计算返回值：

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

计算：{
项目（）{
如果（this.sortType==''）返回this.origItems；
if（this.sortType==='name'）{
返回此.origItems.sort（（a，b）=>{
如果（a.nameb.name）返回1；
返回0；
});
}
if（this.sortType=='age'）{
返回此.origItems.sort（（a，b）=>{
如果（a.ageb.age）返回1；
返回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>

按名称排序
按年龄分类

{{item.name}-{{item.age}

---

您可以在此处看到一个在线示例：

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

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

然后，我根据sortType构建了计算返回值：

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

计算：{
项目（）{
如果（this.sortType==''）返回this.origItems；
if（this.sortType==='name'）{
返回此.origItems.sort（（a，b）=>{
如果（a.nameb.name）返回1；
返回0；
});
}
if（this.sortType=='age'）{
返回此.origItems.sort（（a，b）=>{
如果（a.ageb.age）返回1；
返回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>

按名称排序
按年龄分类

{{item.name}-{{item.age}

---

您可以在这里看到一个在线示例：

按imgRatio排序的示例：

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

{{result.imgRatio}

或

{{result.imgRatio}

计算：{
resultsFiltered（）{
如果（this.sliderVal==0）{
返回this.results.sort（（a，b）=>{return b.imgRatio-a.imgRatio；}）；
}否则{
常量obj=[]；
常数arr=[]；
for（设i=0；i{return b.imgRatio-a.imgRatio；}）；
}
}
},

---

对于Vue2，您可以参考

imgRatio排序示例：

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

{{result.imgRatio}

或

{{result.imgRatio}

计算：{
resultsFiltered（）{
如果（this.sliderVal==0）{
返回this.results.sort（（a，b）=>{return b.imgRatio-a.imgRatio；}）；
}否则{
常量obj=[]；
常数arr=[]；
for（设i=0；i{return b.imgRatio-a.imgRatio；}）；
}
}
},

对于Vue2，您可以在
上参考我的最新方法来过滤结果，同时按参数对结果进行排序：

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])
  }
},

单一要素：

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

customFilters
=是一个带有筛选选项的数组。例如“ratio”或“keyword”。因此我可以使用列表中的每个键进行筛选

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

排序
=比较img1和img2

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

sortType
=字母、数字、按日期或重置为默认视图
以下是我最新的方法来过滤结果并同时按参数对其进行排序：

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])
  }
},

单一要素：

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

customFilters
=是一个带有筛选选项的数组。例如“ratio”或“keyword”。因此我可以使用e进行筛选