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

当我删除.sort（）警告消失了

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

Answer 1

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

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.

Answer 2

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

vue.js在v-for中过滤

2 个答案: