vue.js - 添加“加载更多”按钮以在 Vue 中添加来自 WordPress API 的下 4 个帖子
问题描述
我正在尝试从Vue中的WordPress API添加一个加载更多按钮,每次单击它时都会显示接下来的4个帖子(然后在没有更多帖子时消失或变为非活动状态),但我似乎不能让它正常工作。
这是我到目前为止的代码:
<template>
<div class="videos">
<div class="inner grid">
<div class="video" v-for="video in videos" :key="video.id">
<div class="video-info-pane">
<div class="video-img" :style="{ backgroundImage: 'url(' + video.acf.video_poster + ')' }">
<div class="mask"></div>
<i class="fa fa-play"></i>
</div>
<div class="video-info-pane-title">
<h3 class="video-title">
<router-link :to="{ name: 'videos', params: { id: video.slug }}">
<strong v-html="video.title.rendered"></strong>
</router-link>
</h3>
<div class="video-info-pane-title-inner">
<router-link :to="{ name: 'games', params: { id: video.acf.game[0].post_name }}">
<img :title="video.acf.game[0].post_title" class="slide-info-img" :src="video.acf.game_icon">
</router-link>
<div class="video-details">
<span class="second video-date">{{video.formatted_date}}</span>
<span class="second video-length">{{video.acf.video_length}}</span>
</div>
<router-link :to="{ name: 'videos', params: { id: video.slug }}" class="video-link">
<strong>Details →</strong>
</router-link>
</div>
</div>
</div>
</div>
</div>
<button @click="addMoreVideos" class="btn">Load More</button>
</div>
</template>
<script>
import axios from "axios"
export default{
name: 'Videos',
data() {
return {
videosUrl: 'https://robertsfrontend.com/games/wp-json/wp/v2/videos?_embed',
queryOptions: {
per_page: 4,
page: 1,
offset: 1,
_embed: true
},
videos: [],
}
},
methods: {
getRecentVideos() {
axios
.get(this.videosUrl, { params: this.queryOptions })
.then(response => {
this.videos = response.data;
})
},
addMoreVideos: function() {
this.queryOptions += 4
this.getRecentVideos();
}
},
mounted() {
this.getRecentVideos();
}
}
</script>
解决方案
在 addMoreVideos 中:this.queryOptions.per_page += 4;
推荐阅读
- powershell - 解析输出/如何使用 powershell 解析输出
- python - Tableau Public 的 Python Selenium 网页抓取:如何将收藏夹分配给工作簿?
- android - 在 Android/iOS 上测试我的 PWA 时,模拟应用程序关闭/未使用一两天时发生的情况的最佳方法是什么?
- javascript - 以编程方式创建组件名称
- excel - vba 宏在表格右侧创建列
- angular - 如何解决 nrwl 故事书配置错误?
- python-3.x - Pandas 数据透视表引发 KeyError(i)
- html - 为什么这个 html 表格没有正确对齐?
- reactjs - 如何在 Typescript 中键入异步操作和功能性 React 组件?
- iis - Drupal 8 的预定 SMTP 邮件 - 未送达