Question

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

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

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

我面临的问题是当我导航到Page 2时！如前所述，我使用v-for的索引来显示图像，但是当我移至下一页时，它实际上并没有更新索引。结果，图像显示与第1页相同。

Code:

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;">

Answer 2

此行fetchImages[index].largeImageURL.toLowerCase()上的错误。

由于要迭代fetchData的切片数组，因此它的索引与切片数组有关，而不与原始数组有关。因此，您也应该将分页切片应用于fetchImages。

Answer 3

运行fetchData.slice（）时，它将返回一个新对象。因此，如果您切出10首新诗，它们的索引仍将是0-9，因为返回的对象每次仅包含那么多条目。

Answer 4

之所以不起作用，是因为您仅在此行fetchData上切片fetchData.slice(this.pagination.start, this.pagination.end)，而没有切片fetchImages，这意味着fetchImages仍然是同一数组没有变化，这意味着index 0仍然是同一张图片。最好的办法是使它们保持同步，以便我添加一个pageData和pageImages数组，并且每次更改分页时都更新它们。就像在updatePageData方法中一样

new Vue ({
  el: '#app',
  data: {
      proxy: 'https://cors-anywhere.herokuapp.com/',
      imageIndex: 0,
      pagination: {
        start: 0,
        end: 10,
        resPerPage: 10
      },
      fetchData: [],
      fetchImages: [],
      pageData: [],
      pageImages: []
  },
  methods: {
    paginateNext() {
      this.pagination.start = this.pagination.start + this.pagination.resPerPage;
      this.pagination.end = this.pagination.end + this.pagination.resPerPage;
      this.updatePageData()
    },
    updatePageData () {
    	this.pageData = this.fetchData.slice(this.pagination.start, this.pagination.end)
      this.pageImages = this.fetchImages.slice(this.pagination.start, this.pagination.end)
    },
    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() {
  	Promise.all([
    	this.fetchDatas(),
      this.fetchImagess()
    ])
    .then(() => this.updatePageData())
  }
});

<div id="app">
  <div v-for="(poetry, index) in pageData">
    <div>
      <img :src="pageImages[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="paginateNext()">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>

VueJS数组索引返回错误结果

4 个答案: