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

Question

我有一个简单的 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;
});

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

完整的例子

 new Vue({ el: '#app', data: { days: [{ "number": 1, "isSunday": false }, { "number": 2, "isSunday": false }, { "number": 3, "isSunday": false }, { "number": 4, "isSunday": false }, { "number": 5, "isSunday": false }, { "number": 6, "isSunday": false }, { "number": 7, "isSunday": true }, { "number": 8, "isSunday": false }, { "number": 9, "isSunday": false }, { "number": 10, "isSunday": false }, { "number": 11, "isSunday": false }, { "number": 12, "isSunday": false }, { "number": 13, "isSunday": false }, { "number": 14, "isSunday": true }, { "number": 15, "isSunday": false }, { "number": 16, "isSunday": false }, { "number": 17, "isSunday": false }, { "number": 18, "isSunday": false }, { "number": 19, "isSunday": false }, { "number": 20, "isSunday": false }, { "number": 21, "isSunday": true }, { "number": 22, "isSunday": false }, { "number": 23, "isSunday": false }, { "number": 24, "isSunday": false }, { "number": 25, "isSunday": false }, { "number": 26, "isSunday": false }, { "number": 27, "isSunday": false }, { "number": 28, "isSunday": true }, { "number": 29, "isSunday": false }, { "number": 30, "isSunday": false }, { "number": 31, "isSunday": false } ] }, 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; } } })

 <!DOCTYPE html> <html> <head> <meta name="description" content="Vue.delete"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script> </head> <body> <div id="app"> <table class="table table-striped"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thi</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </thead> <tbody> <tr> <td v-for="day in limitArray(days,7)"> {{day.number}} </td> </tr> </tbody> </table> </div>

Answer 3

我认为你应该这样做：

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

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

问题描述

3 个解决方案

解决方案1
3 已采纳 2018-12-05 23:25:49

解决方案2
2 2018-12-05 20:01:07

解决方案3
-1 2019-10-17 08:30:18

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

问题描述

3 个解决方案

解决方案1 3 已采纳 2018-12-05 23:25:49

解决方案2 2 2018-12-05 20:01:07

解决方案3 -1 2019-10-17 08:30:18

解决方案1
3 已采纳 2018-12-05 23:25:49

解决方案2
2 2018-12-05 20:01:07

解决方案3
-1 2019-10-17 08:30:18