Vue.js - 在 v-for 中使用过滤器

Question

我有一个简单的 Vue 过滤器，它将数组的长度限制为 n 个元素。像这样使用它工作正常：

{{ array | limitArray(2) }}

现在我想在v-for循环中使用它，如下所示：

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

但这会引发错误。如何在 a 中使用过滤器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;
});

Answer 1

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

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

Answer 2

您可以使用method代替filter：

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

完整示例

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