javascript - Vue 过滤器函数总是返回 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 post 请求获取一个 items 对象，其响应被推送到 items 数组中，该数组在组件声明时为空。 所以 axios -> 获取带有项目的对象 -> 插入空数组。 现在我想显示 5 个项目并制作一个显示更多按钮。

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

接下来我要做的是尝试使用拼接和切片、数组副本并将元素插入其中，直到满足特定条件，但是..有更好的方法吗？ 提前致谢

Answer 1

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

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

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

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