Looking to incorporate the Vue Flipbook component into my project, which requires an array of image URLs for the "pages" prop. I am fetching post responses from the WordPress REST API.
My goal is to extract the "image" property from the response array and convert it into a new array of image URLs. Typically, I would iterate through the posts using v-for=post in posts in my template and display the image using post.image_full within the loop.
Here is how the Flipbook component is set up:
<Flipbook
class="flipbook"
:pages="imagesArray" <--- insert images array here
v-slot="flipbook"
ref="flipbook"
>
</Flipbook>
Below is the structure of My Posts.vue component:
export default {
name: 'GridOne',
props: {
page: {
type: Number,
required: true
}
},
data() {
return {
request: {
type: 'posts',
params: {
per_page: this.$store.state.site.posts_per_page,
page: this.page
},
showLoading: true
},
totalPages: 0
}
},
computed: {
posts() {
return this.$store.getters.requestedItems(this.request) <--- response array extraction
}
},
methods: {
getPosts() {
return this.$store.dispatch('getItems', this.request)
},
setTotalPages() {
this.totalPages = this.$store.getters.totalPages(this.request)
}
},
created() {
this.getPosts().then(() => this.setTotalPages())
}
}