vue.js v-for 中的过滤器

Question

我想知道如何在 vue 中使用过滤器

我知道计算以及何时使用它，但我的问题是

我使用此代码对水果数组进行排序，而不是使用计算

<li v-for="fruit in fruits.sort() ">{{fruit }}</li>

它运行我得到了正确的结果

但控制台通知我错误

[Vue warn]: You may have an infinite update loop in a component render function. 
(found in <MyFilter> at C:\xampp\htdocs\projects\max\___explaning9_filters_mixins\src\MyFilter.vue)
warn @ VM6599:564
flushSchedulerQueue @ VM6599:2340
(anonymous) @ VM6599:511
nextTickHandler @ VM6599:460

当我删除 .sort() 警告消失了

问题：为什么会出现此警告，是否有任何方法可以在不使用计算值的情况下将 .sort() 添加到 v-for 数组

Answer 1

基于 documentation，数组突变方法也会导致更新，这就是为什么您运行陷入了无限循环。换句话说，您正在使用 v-for 指令呈现列表中的项目，但随后再次使用 sort 变异方法。

Answer 2

您收到错误是因为在 v-for 语句中调用 fruit.sort() 时创建了无限循环。

fruit.sort() 导致数组发生变异（更新），当 Vue 收到此更新通知时，它会尝试更新 DOM 然后计算 v-for 语句。这将再次调用 fruit.sort() 然后触发更新。

天真的回答：

您可以使用 v-for="fruit in fruits.map(f => f).sort()"，尽管如果列表有点大，这可能会变得很重。它做了两件事：1) fruits.map(f => f) 创建一个包含与 fruits 相同值的新数组，然后 2) 对新创建的数组进行排序。

更好的答案：

而不是在模板中内联复制和排序（不应该，你可以使用一个方法做同样的事情。你想把尽可能多的逻辑尽可能在模板之外。

{
    ...Other component properties...

    methods: {
        sorted(arr) {
            // Return a copy of the sorted array
            return arr.map(e => e).sort()
        }
    }

    ...Other component properties...
}

还有更好的回答：

如果您一直在使用 Vue 1.x，您可以为此使用过滤器（v-for="fruit in fruits | orderBy"，但在文本插值之外使用过滤器（{{ }}）已从Vue 2.x 而不是 Vue's official migration guide 建议使用 计算属性 来做这件事。

现在，我仍然建议不要在计算属性中改变数组，而是先复制数组然后对其进行排序，或者甚至可以遵循他们的指南并为此使用 lodash 的 orderBy(...) 函数。

{
    ...Other component properties...

    computed: {
        sortedFruits() {
            // Return a copy of the sorted array
            return this.fruits.map(f => f).sort()
        }
    }

    ...Other component properties...
}

希望这对您有所帮助。

编辑：Here's a pen displaying this.

vue.js v-for 中的过滤器

vue.js filters in v-for

javascript

vuejs2

vue-filter