Vue filter函数总是返回多5个元素

Question

实际上没有什么大不了的，但是一个计算出来的属性过滤器函数是怎样的，它总是返回当前的数组+5多个元素？

更详细的：

模板：

 <span class="box-content" v-for="item in activeItems" :key="item.id">
      <img class="item" :src="item.filename" />
    </span>

脚本

      data: function() {
    return {
      items: [],

      limit: 1,
    };
  },
  computed: {
activeItems: function() {
    return this.items.filter( function(s) {
        if(s.length > this.limit) {
            return s;
        }
    });
//   return this.limit ? this.items : this.items;
}
},

在页面加载时，axios请求获取一个条目对象，该对象的响应被推入组件声明时为空的items数组中。因此，axios -> get对象与条目->推入空数组。现在我想显示，就像，5个项目，并使一个显示更多的按钮。

现在的问题是，我的activeItems函数无效，它不知道"this.limit“，而且我怀疑它是否返回正确的结果，因为我刚刚让它返回自己，而不是一组对象/数组。

接下来我要做的是尝试剪接和切片，数组拷贝，并将元素推入其中，直到满足一定的条件。有更好的办法吗？提前感谢

Answer 1

应该使用filter函数根据数组的内部值进行筛选。假设您有一个带有persons的对象数组，并且每个Person都是一个age，那么您可以使用Array.prototype.filter函数根据每个条目的年龄进行筛选。因此，筛选器函数会遍历数组中的每个条目，并确定是否应该包含或排除项。

另一方面，如果您想根据最大的条目数限制条目的数量，我建议您使用Array.prototype.slice，正如您已经提到的。

您的计算函数可以重写为：

activeItems: function() {
    return this.items.slice(0, this.limit)
}

Answer 2

首先，在代码中，this.limit是未定义的，因为this引用的是匿名函数。如果要访问组件，最好使用箭头函数语法。而且，s引用数组中的一个元素，所以s.length也将是未定义的--我猜.

现在，filter似乎不是满足您需要的最佳选择。我会用slice代替。有些像：

computed: {
  activeItems() {
    return this.items.splice(0, this.limit)
  }
}

当您单击“显示更多”按钮时，limit将增加5。

Answer 3

你当然能做到。你只是漏掉了一些密码。在这里你是如何修复它的

activeItems: function() {
    let limit = this.limit
    return this.items.filter( function(item, s) {
        return s <= limit
    });
}

如果您不介意使用过滤器，下面是一些方法。

First：在for循环中添加条件，这个循环

<span class="box-content" v-for="(item, index) in items" :key="item.id" v-if="index <= limit">
      <img class="item" :src="item.filename" />
</span>

第二个是在所需的长度上分割数组，这一个

<span class="box-content" v-for="(item, index) in items.slice(0, limit)" :key="item.id">
      <img class="item" :src="item.filename" />
</span>