javascript - VueJS 数组索引返回错误结果

Question

我正在创建一个诗歌应用程序，其中使用 API 调用获取诗歌。

我使用 axios 库获取数据并执行 v-for 来填充数据。我使用 v-for 中的 index 分别填充每首诗的图像。

我使用自己的自定义分页每页显示 10 个结果。目前，它仅适用于下一个按钮。

我面临的问题是当我导航到第 2 页时!正如我之前所说，我使用 v-for 的索引来显示图像，当我移动到下一页时，它实际上并没有更新索引。因此，显示的图像与第 1 页相同。

代码:

new Vue({
  el: '#app',
  data: {
    proxy: 'https://cors-anywhere.herokuapp.com/',
    imageIndex: 0,
    pagination: {
      start: 0,
      end: 10,
      resPerPage: 10
    },
    fetchData: [],
    fetchImages: []
  },
  methods: {
    paginate() {
      this.pagination.start = this.pagination.start + this.pagination.resPerPage;
      this.pagination.end = this.pagination.end + this.pagination.resPerPage;
    },
    async fetchDatas() {
      try {
        const res = await axios(`${this.proxy}http://poetrydb.org/author,title/Shakespeare;Sonnet`);
        if (res) {
          this.fetchData = res.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    async fetchImagess() {
      const key = '9520054-7cf775cfe7a0d903224a0f896';
      const perPage = 154;
      const proxy = ''
      const res = await axios(`${this.proxy}https://pixabay.com/api/?key=${key}&per_page=${perPage}`);
      this.fetchImages = res.data.hits;
    }
  },
  mounted() {
    this.fetchDatas();
    this.fetchImagess();
  }
});

<div id="app">
  <div v-for="(poetry, index) in fetchData.slice(this.pagination.start, this.pagination.end)">
    <div>
      <img :src="fetchImages[index].largeImageURL.toLowerCase()" style="max-width: 100%;height: auto;max-height: 320px;">
      <div>
        <h5>{{ poetry.title }}</h5>
        <span v-for="(poetryBody, i) in poetry.lines.slice(0, 5)">
              {{ i === 4 ? poetryBody.split(',').join('') + '...' : poetryBody  }}
            </span>
        <br>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <nav style="padding-top: 3em;">
    <button @click="paginate()">Next</button>
  </nav>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

JSFiddle:http://jsfiddle.net/sanjaybanjade/vnu654gk/9/

如您所见，当我转到第 2 页时，图像没有更新!请帮我解决这个问题!

请忽略控制台错误。我稍后会修复它们。

Answer 1

快速解决方法是计算第 4 行中的偏移量以在分页上更新:

<img v-bind:src="fetchImages[index + pagination.start].largeImageURL.toLowerCase()" style="max-width: 100%;height: auto;max-height: 320px;">