Vue遍历fetch api数组对象，并在Spa中使用prev/next按钮和默认的第一个视图进行显示

data() {
  return {
    items: []  // 数组对象
  }
}

mounted() {
  fetch('https://example.com/api/data')
    .then(response => response.json())
    .then(data => {
      this.items = data;  // 将获取的数据赋值给数组对象
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

<div v-for="item in items" :key="item.id">
  {{ item.name }}
</div>

data() {
  return {
    items: [],  // 数组对象
    currentViewIndex: 0  // 当前显示的视图索引
  }
}

<div>
  <div>{{ items[currentViewIndex].name }}</div>
  <button @click="prevView">Prev</button>
  <button @click="nextView">Next</button>
</div>

methods: {
  prevView() {
    if (this.currentViewIndex > 0) {
      this.currentViewIndex--;
    }
  },
  nextView() {
    if (this.currentViewIndex < this.items.length - 1) {
      this.currentViewIndex++;
    }
  }
}