Не удается разбить новостной API на разные страницы в Vue.js2
Я пытаюсь создать простую функцию разбиения на страницы в своем компоненте Vue для API newsapi.org.
Мой первоначальный вызов API в созданном хуке работает так, как и ожидалось, но я изо всех сил пытаюсь перейти на разные страницы.
Я знаю, что существуют другие многоразовые компоненты разбивки на страницы, включая vuetify, который я использую в своем проекте, но мои потребности действительно просты, поэтому я решил создать его вручную в своем компоненте, который имеет только две кнопки для перехода к следующему и предыдущие страницы с другой кнопкой отображения в середине, отображающей номер текущей страницы.
Это мой код Vuetify для разбиения на страницы...
<div class = "text-xs-center">
<v-btn fab small dark color = "teal" :disabled = "disabled" @click.prevent = "prev()">
<v-icon dark>mdi-chevron-left</v-icon>
</v-btn>
<v-btn outline fab class = "title" color = "white">{{ this.currentPage }}</v-btn>
<v-btn fab small dark color = "teal" @click.prevent = "next()">
<v-icon dark>mdi-chevron-right</v-icon>
</v-btn>
</div>
Это мой код для получения результатов, а также мои функции для изменения страниц...
computed: {
pageCount() {
return Math.ceil(this.totalResults / this.maxPerPage);
},
created() {
this.fetchNews();
},
methods: {
fetchNews() {
axios
.get(this.apiUrl)
.then(res => {
this.articles = res.data.articles;
this.totalResults = res.data.totalResults;
console.info(res.data);
})
.catch(err => {
console.info(err);
});
},
next() {
this.currentPage += 1;
this.fetchNews();
},
prev() {
this.currentPage -= 1;
this.fetchNews();
},
Я установил размер страницы на 9, поэтому я получаю 9 результатов на странице. и вот как я построил apiUrl...
apiUrl: `https://newsapi.org/v2/everything?q=real-madrid&language=en&page=${this.currentPage}&pageSize=9&apiKey=5b***********8f4aa3d63cf050b2`,
Я не уверен, нужно ли мне как-то использовать мой pageCount для достижения того, чего я хочу. Заранее благодарю за любую помощь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
apiUrl должен быть вычисляемым свойством.
data() {
return {
currentPage: 1
maxPerPage: 9,
totalResults: 0,
}
},
computed: {
pageCount() {
return Math.ceil(this.totalResults / this.maxPerPage);
},
isFirstPage() {
return this.currentPage === 1
},
isLastPage() {
return this.currentPage >= this.pageCount
},
apiUrl() {
return `https://newsapi.org/v2/everything?q=real-madrid&language=en&page=${this.currentPage}&pageSize=${this.maxPerPage}&apiKey=5b***********8f4aa3d63cf050b2`
},
}
methods: {
fetchNews() {
axios
.get(this.apiUrl)
.then(res => {
this.articles = res.data.articles;
this.totalResults = res.data.totalResults;
console.info(res.data);
})
.catch(err => {
console.info(err);
});
},
next() {
if (this.isLastPage) return
this.currentPage += 1;
this.fetchNews();
},
prev() {
if (this.isFirstPage) return
this.currentPage -= 1;
this.fetchNews();
},
},
Потому что apiUrl должен автоматически меняться каждый раз, когда это делает currentPage. Каждый раз, когда значение получается из другого значения, оно должно быть вычисляемым свойством, иначе вам придется создать наблюдатель, наблюдающий за текущей страницей и изменяющий apiUrl.
Спасибо, теперь это имеет большой смысл. :)
Спасибо Рено!!! Это именно то, чего я хотел добиться. Это имеет смысл для меня. Можете ли вы сказать мне, почему в этом случае apiUrl должно быть вычисляемым свойством? Это единственное, что я не могу уложить в голове прямо сейчас... Еще раз спасибо.