时间戳

首页 > 解决方案 > Vue显示下一个数组项

arrays - Vue显示下一个数组项

问题描述

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

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

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

这是我到目前为止所拥有的。

标签： arraysmethodsvuejs2computed-properties

解决方案

您可以在计算出的过滤数据上使用 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

推荐阅读