Vue.js -使用v-for内部的过滤器

gz5pxeao 于 2023-01-17 发布在 Vue.js

关注(0)|答案(3)|浏览(117)

我有一个简单的Vue过滤器，它可以将数组的长度限制为n个元素。
{{ array | limitArray(2) }}
现在我想在v-for循环中使用它，如下所示：
<li v-for="item in items | limitArray(3)">...</li>
但是这会引发错误，我如何在v-for中使用过滤器呢？
编辑：可能不重要，但有问题的过滤器：

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;
});

vue.js

来源：https://stackoverflow.com/questions/53639575/vue-js-use-filter-inside-v-for

3条答案

按热度按时间

yquaqz181#

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

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

但在Vue 3中删除了过滤器。请使用方法代替。

赞(0）回复(0）举报 2023-01-17

toiithl62#

您可以使用method代替filter（特别是在Vue 3中）：

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

在你的方法中

methods:{
     limitArray (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;
  }
 ...
}

- 完整示例**

一个二个一个一个

赞(0）回复(0）举报 2023-01-17

iszxjhcz3#

我认为你应该这样做：

<li v-for="item in $options.filter(v => dosomething)">

赞(0）回复(0）举报 2023-01-17

我来回答

Vue.js -使用v-for内部的过滤器

3条答案

相关问题

热门标签

最新问答