Exploring the Wordpress API and devising a fresh blog system. As a newbie to VueJS, I'm intrigued by how this is handled.
The initial blog posts load as follows:
let blogApiURL = 'https://element5.wpengine.com/wp-json/wp/v2/posts?_embed&per_page=12'
let authorApiURL = "https://element5.wpengine.com/wp-json/wp/v2/users"
let newPage = 1;
let posts = new Vue({
el: '#app',
data: {
authors: null,
currentAuthor: '23',
posts: null,
pageNumber: newPage,
range: 0
},
created: function() {
this.fetchAuthorData()
this.fetchBlogData()
},
watch: {
currentAuthor: 'fetchBlogData'
},
methods: {
fetchAuthorData: function() {
let xhr = new XMLHttpRequest()
let self = this
xhr.open('GET', authorApiURL)
xhr.onload = function() {
self.authors = JSON.parse(xhr.responseText)
}
xhr.send()
},
fetchBlogData: function() {
let xhr = new XMLHttpRequest()
let self = this
xhr.open('GET', blogApiURL + '&page=' + self.pageNumber + '&author=' + self.currentAuthor)
xhr.onload = function() {
self.posts = JSON.parse(xhr.responseText)
}
xhr.send()
}
}
})<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dfbf8e8cdbfa3bda3be">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<div class="author-toggle-wrap post">
<select v-model="currentAuthor" name="authors" id="author-select">
<template v-for="author in authors">
<option
:id="author.id"
:value="author.id"
name="author.id">{{ author.name }}</option>
</template>
</select>
</div>
<div class="post-wrapper">
<p>Current Author: <code>{{ currentAuthor }}</code></p>
<template v-for="post in posts">
<div class="post">
<h2 class="post-title" v-html="post.title.rendered"></h2>
<template v-if="post._embedded['wp:featuredmedia']">
<a v-if="post._embedded['wp:featuredmedia'][0].media_details.sizes['large']" :href="post.link">
<img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes['large'].source_url" />
</a>
<a :href="post.link" v-else>
<img src="https://element5.wpengine.com/wp-content/themes/wp-starter-theme/dist/images/default-thumb.jpg" />
</a>
</template>
<div class="excerpt" v-if="post.excerpt.rendered" v-html="post.excerpt.rendered"></div>
<div class="entry-meta" v-if="post._embedded.author[0]">
<a class="author-wrap" :href="post._embedded.author[0].link"><img class="avatar" :src="post._embedded.author[0].avatar_urls['48']" />by {{ post._embedded.author[0].name }} </a>
<a class="button read-more" :href="post.link">Read More »</a>
</div>
</div>
</template>
</div>
</div>Satisfied with the results! Vue has sparked my excitement and revealed great potential!
Attempting to figure out how to load more posts without wiping out existing ones. Started on this approach:
Vue.component('sub-blog', {
template: '<div>On Each Click Load Next 12 posts here!</div>'
})
let newPosts = new Vue({
el: '#load-more-posts',
data: {
range: 0
},
methods: {
addMorePosts: function() {
newPage++
this.range += 1
}
}
})<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7919282a7d5c9d7c9d4">[email protected]</a>/dist/vue.js"></script>
<div id="load-more-posts">
<sub-blog v-for="n in range"></sub-blog>
<div class="load-more">
<button v-on:click="addMorePosts" class="btn">Load More</button>
</div>
</div>After some tinkering, seeking guidance on loading dynamic data into the component correctly. It's adding new components upon click which is neat but requires firing off a new api GET request with an updated page number to append the same layout as initially loaded posts.
Check out the pen here: https://codepen.io/trafficdaddy/pen/YEwNKy?editors=1010
Appreciate any assistance!