Vue.js：如何在每次单击按钮时循环列表中的项目答案

【问题标题】：Vue.js：如何在每次单击按钮时循环列表中的项目
【发布时间】：2019-08-20 12:00:40
【问题描述】：

我需要呈现一个项目列表，每次单击按钮时都会显示一个项目。

存储中的数据是从 JSON 导入的，具有 3 个深度级别。我可以循环通过 2 个较高的级别（部门和组），但不能循环最低的一个（项目）。这意味着我可以看到一个组中的所有项目，并在单击后更改组。

当我控制台记录代码正在读取的项目、组和部门时，我可以看到 item.id 在每次点击时都在增加。事实上，我需要item.lenght 的点击次数才能传递给下一组。然而，所有项目都是一起渲染的。

这是带有示例代码的fiddle。

在示例中，我想先看到“某物”这个词，然后单击后我应该看到“其他东西”，然后是“一物”，然后是“另一物”。

相反，我同时看到“某物”组文本，然后是“事物”组文本。

请注意，如果在计算项目中我这样做（就像我想做的那样）：

return this.groups.item[this.currentItem]

小提琴停止工作，在我的代码中我收到一个“无法读取属性 'id' 为 null。

【问题讨论】：

标签： vuejs2

【解决方案1】：

我已经用这样的 .slice() 方法解决了这个问题：

v-for=“item in filteredItems”

和

computed: {
    divisions () {
      return this.fullData.division[this.currentDivision]
    },
    groups () {
      return this.divisions.group[this.currentGroup]
    },
    items () {
        return this.groups.item
    },
    filteredItems: function () {
      if (this.items) {
        return this.items.slice(this.currentItem, this.currentItem + 1)
      }
    }
  }

但我仍然很好奇为什么我不能使用 item[this.currentItem] 以及是否有更好的方法可以在不使用 .slice() 的情况下一次列出一个项目

【讨论】：