Question

我需要呈现一个项目列表，每单击一个按钮一次。

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

当我用console.log登录代码正在读取的项目，组和分区时，我可以看到item.id每次单击都在增加。实际上，我需要点击次数item.lenght才能传递到下一组。但是，所有项目都一起呈现。

这是一个带有示例代码的fiddle。

在此示例中，我想先看到“某物”一词，然后单击一下，我应该看到“另一物”，然后是“某物”，然后是“另一物”。

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

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

return this.groups.item[this.currentItem]

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

Answer 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（）列出一项的更好方法感到好奇。

Vue.js：如何在列表中的项目每单击一次按钮就循环一个项目

1 个答案: