I am currently working on a project using vue.js and axios to fetch the latest post content from a specific category of a WordPress site using REST API. The post content is always in the form of an ordered list (OL) which will then be displayed as a carousel. Although I have successfully injected the OL, I am facing issues with manipulating it. Can someone kindly help me identify the problem in my JavaScript code? While I know this task can be easily accomplished using jQuery, I am eager to explore something new.
Here is the HTML:
<div class="frame ajax announcements">
<h1 id="announcements-title" class="material ajax-title">Announcements<span class="title-this-week"></span></h1>
<div id="app" class="ajax-body material" v-html="posts[0].content.rendered">
</div>
</div>
And here is the JS code:
var tcnt = 0;
new Vue({
el: '#app',
data: {
posts: []
},
created() {
axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/categories/')
.then((response) => {
var categoryId = 0;
response.data.forEach(function(category){
if (category.slug == 'announcements') {
categoryId = category.id;
console.log('Category ID: ' + category.id);
}
});
return categoryId;
})
.then((categoryId) => {
console.log(categoryId);
return axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/posts/', {
params: {
categories: categoryId,
per_page: 1,
status: 'publish'
}
});
})
.then((response) => {
console.log(response.data);
this.posts = response.data;
})
.catch((error) => {
console.log(error.message);
})
},
mounted() {
var announcements = document.querySelectorAll('.frame.ajax .ajax-body ol li');
console.log(announcements.length);
setInterval(function(){
var target = announcements.length % tcnt;
for (i = 0; i < announcements.length; i++) {
if (i == target) {
announcements[i].style.display = 'block';
}
else {
announcements[i].style.display = 'initial';
}
}
tcnt++;
}, 1000);
}
});