v-for 中的 vue.js 过滤器答案

【问题标题】：vue.js filters in v-forv-for 中的 vue.js 过滤器
【发布时间】：2017-09-20 08:13:50
【问题描述】：

我想知道在 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\___explaning\169_filters_mixins\src\MyFilter.vue)
warn @ VM6599:564
flushSchedulerQueue @ VM6599:2340
(anonymous) @ VM6599:511
nextTickHandler @ VM6599:460

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

问题：为什么会出现这个警告，有没有办法在不使用计算值的情况下将 .sort() 添加到 v-for 数组中

【问题讨论】：

标签： javascript vuejs2 vue-filter

【解决方案1】：

您收到错误是因为在 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 中移除，取而代之的是 @987654321 @ 建议使用计算属性来处理这个确切的事情。

现在，我仍然建议不要在计算属性中更改数组，而是先复制数组然后对其进行排序，或者甚至可以按照他们的指南使用 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.

【讨论】：

【解决方案2】：

基于documentation，数组突变方法也会导致更新，这就是您遇到无限循环的原因。换句话说，您正在使用v-for 指令呈现列表中的项目，然后再次使用排序突变方法。

【讨论】：