VueJS数组索引返回错误结果
我正在创建一个诗歌应用程序，在这个应用程序中，使用API调用获取诗歌。
我使用axios库获取数据，并执行v-for填充数据。我分别使用index from v-for来填充每首诗的图像。
我使用自己的自定义分页显示每页10个结果。目前，它只适用于next按钮。
我面临的问题是当我浏览到第二页时！正如我前面所说，我使用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页时，图像不会被更新！请帮我把这个修好！
请忽略控制台错误。我以后会修好的。
回答 4
Stack Overflow用户
发布于 2018-07-11 08:59:44
快速修复将是计算第4行中的偏移量，以更新分页：
<img v-bind:src="fetchImages[index + pagination.start].largeImageURL.toLowerCase()" style="max-width: 100%;height: auto;max-height: 320px;">
Stack Overflow用户
发布于 2018-07-11 08:46:57
这行fetchImages[index].largeImageURL.toLowerCase()错了。
因为您正在迭代fetchData的切片数组，所以它的索引与切片数组有关，而不是原始数组。因此，您也应该将分页切片应用于您的fetchImages。
Stack Overflow用户
发布于 2018-07-11 08:48:02
运行fetchData.slice()时，它将返回一个新对象。因此，如果分割出10条新的诗歌，它们的索引仍然是0-9，因为返回的对象每次只有那么多项。
https://stackoverflow.com/questions/51280789
复制相似问题
腾讯云开发者
