Vue.js 列表 orderBy 过滤器不将动态添加的项目排序到数组答案

【问题标题】：Vue.js list orderBy filter not sorting dynamically added items to arrayVue.js 列表 orderBy 过滤器不将动态添加的项目排序到数组
【发布时间】：2017-09-30 17:24:44
【问题描述】：

当新对象添加到 Vue.js 组件中的对象数组时，渲染列表将更新，但是，oderBy 过滤器不会应用于添加的新项目。例如，一个对象数组，其中每个对象都有一个属性name，并且orderBy 过滤器应用于name，如果我将一个新对象推送到数组，这个对象将显示为最后一项渲染列表。使用unshift 时，对象将显示为列表的第一项。

如何正确地将项目添加到数组中，以便 Vue.js 可以将 orderBy 过滤器应用于所有项目重新呈现列表？

我尝试与Vue.set / $set 一起玩，但无法成功。任何帮助表示赞赏。

HTML：

<div v-for="object in array | orderBy 'name'">
    {{ object.name }}
</div>

JS：

data: function() {
    return {
        array: [
            {
                name: 'Jon'
            },
            {
                name: 'Alex'
            }
        ]
    },
},
methods: {
    addItemToArray() {
        let item = { name: 'Paul' }
        this.array.push(item)
    }
}

【问题讨论】：

在 Vue 2.x 中，这种行为已被弃用，您应该使用 computed property 来存储过滤后的数组，并循环遍历此计算属性。 Filters 旨在改变数据的呈现方式，而不是改变数据本身。此外，插值中| 之后使用的过滤器在 Vue 实例内的 filters 对象下声明。
@wostex 谢谢。

标签： javascript arrays vue.js

【解决方案1】：

看起来您想要做的是让渲染列表成为计算数据，而不是使用过滤器功能。如果我没记错的话，过滤器不会自动更新，而计算属性会。

所以我想你需要一些类似的东西：

<template>
   <div v-for="person in sortedArray">
       {{ person.name }}
   </div>
</template>

<script>
export default {
   data() {
      return {
         array: [ ... ]
      }
   },
   computed: {
      sortedArray() {
         return orderByName(this.array)
      }
   },
   methods: {
      orderByName(array) {
         ...
      }
   }
}
</script>

希望这会有所帮助！

【讨论】：

【解决方案2】：

我刚刚意识到orderBy 过滤器在将项目推送到数组时可以正常工作。问题在于添加的项目格式。当然，我正在开发的应用程序比我在此处发布的示例更复杂，而且我遗漏了一些东西。这是我在此处发布的相同示例的工作小提琴：https://jsfiddle.net/crabbly/zr8156b3/

我想发布的另一件事是我维护的应用程序使用 Vue 1.x，并且过滤器已从 Vue.js 2.x 中删除，如下所述：https://vuejs.org/v2/guide/migration.html#Replacing-the-orderBy-Filter

也就是说，@King-Reload 和@BenCodeZen 提出的解决方案可以结合起来作为创建排序列表的替代方案（使用返回排序数组的计算属性）。

【讨论】：

【解决方案3】：

methods: {
    array: function (a, b) {
        a = a.name.toLowerCase();
        b = b.name.toLowerCase();

        return a < b ? -1 : a > b ? 1 : 0;
    }

    array: function (a, b) {
        return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
    }
}

我不得不在这里结合javascript 和vuejs，但基本上它起作用的原因是比较< 和朋友被定义为使用字符串的字典顺序。它在内部检查每个匹配的字符，当它找到两个不同的 Unicode 值时，它会返回，这会导致“字典”排序。这也是我添加toLowerCase() 调用以防万一的原因，因为比较本身仅比较代码点值。它也适用于区分大小写的排序。

Javascript 变体如下所示：

array.sort( function( a, b ) {
    a = a.name.toLowerCase();
    b = b.name.toLowerCase();

    return a < b ? -1 : a > b ? 1 : 0;
});

array.sort( function( a, b ) {
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
});

【讨论】：