Question

当新对象添加到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)
    }
}

Answer 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>

希望这有帮助！

Answer 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提出的解决方案可以组合起来作为创建排序列表的替代方法（使用返回排序数组的计算属性）。

Answer 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值时，它返回，这导致＆＃34;字典＆＃34;排序。这也是为什么我添加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;
});

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

3 个答案: