Vue 显示数组的下一个项目数

Question

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

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

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

Here 是我目前所拥有的。

Answer 1

您可以在计算的 filteredData 上使用 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

Vue 显示数组的下一个项目数

Vue show next amount of items of array

arrays

methods

computed-properties

vuejs2