Vue.js: как зациклить элементы в списке по одному элементу за каждое нажатие кнопки

Question

Мне нужно отобразить список элементов, по одному элементу при каждом нажатии кнопки.

Данные в магазине импортированы из JSON и имеют 3 уровня глубины.Я могу перебрать 2 верхних уровня (разделение и группа), но не могу зациклить самый нижний (элемент).это означает, что я вижу все элементы в группе и меняю группу после щелчка.

Когда я console.log, какой элемент, группу и подразделение читает код, я вижу, что item.id увеличиваетсяна каждый клик.На самом деле, мне нужно item.lenght количество кликов, чтобы перейти к следующей группе.Тем не менее, все элементы отображаются вместе.

Это скрипка с примером кода.

В этом примере я хотел бы сначала увидеть слово «что-то»,затем после щелчка я должен увидеть «что-то другое», затем «вещь», а затем «другую вещь».

вместо этого я вижу текст группы «что-то» одновременно, а затем «вещь»'group text.

Обратите внимание, что если в вычисляемых элементах я делаю это (как мне хотелось бы):

return this.groups.item[this.currentItem]

скрипта перестает работать, и в моем коде я получаю'Не удается прочитать свойство' id 'с нулевым значением.

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 ()