VueJS 数组索引返回错误的结果

Question

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

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

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

我面临的问题是当我导航到第 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>