Vue显示下一个数组项答案

【问题标题】：Vue show next amount of items of arrayVue显示下一个数组项
【发布时间】：2020-10-12 19:06:01
【问题描述】：

我想制作一个按钮来显示我的数组中接下来的 2 个项目。

数组的初始数量应该是2，然后当按下按钮时，它应该用2个项目扩展数组，依此类推。当只有 1 个项目时，按钮不应该是可见的。

我怎样才能做到这一点？我可以为此使用slice() 方法吗？

Here 是我目前所拥有的。

【问题讨论】：

标签： arrays methods vuejs2 computed-properties

【解决方案1】：

您可以在计算出的过滤数据上使用 slice 而不是使用 slice 的第二个参数作为键，您可以修改该键以告知您希望页面显示多少。我会称之为productsToShow。

data: () => ({
    productsToShow: 2,
    products: [...]
}),
computed: {
    filteredData() {
      const LowerCaseSearch = this.search.toLowerCase();
      const filteredProducts = this.products.filter(
        product =>
          product.name.toLowerCase().includes(LowerCaseSearch) ||
          product.category.toLowerCase().includes(LowerCaseSearch)
      );
      
      return filteredProducts.slice(0, this.productsToShow);
    }
}

然后您可以修改您的 ShowNext 组件按钮以发出父 (List.vue) 可以侦听的事件，然后更改密钥：productsToShow

https://codesandbox.io/s/zen-perlman-uhd11

【讨论】：

你对this question有什么想法吗？