Vue.js - 在 v-for 中使用过滤器 [英] Vue.js - Use filter inside v-for

问题描述

我有一个简单的 Vue 过滤器，它将数组的长度限制为 n 个元素.像这样使用效果很好:

I have a simple Vue filter that limits the length of an array to n elements. It works fine used like this:

{{ 数组 |limitArray(2) }}

现在我想在 v-for 循环中使用它，就像这样:

Now I'd like to use it inside a v-for loop, like this:

<li v-for="item in items | limitArray(3)">...</li>

但这会引发错误.如何在 v-for 中使用过滤器?

But that throws errors. How can I use a filter inside a v-for?

可能不重要，但有问题的过滤器:

Probably unimportant, but the filter in question:

Vue.filter('limitArray', function (arr, length = 3) {
    if (arr && arr.length) {
        if (length == -1) {
            return arr;
        }
        if (length > arr.length) {
            return arr;
        }

        return arr.slice(0, length);
    }

    return null;
});

推荐答案

您必须将过滤器作为方法调用:

You have to call the filter as a method:

<li v-for="item in $options.filters.limitArray(items, 3)">

这篇关于Vue.js - 在 v-for 中使用过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！