My first venture into Vue.js involves working with WP REST API.
Initially, all my posts are displayed perfectly. However, when I attempt to integrate Vue-router, the component responsible for showcasing all the posts, 'home-post-list', breaks down at the very first 'v-if="posts"' statement.
Evidently, Vue perceives that there are no posts and therefore does not render anything further. Unfortunately, I am unable to resolve how to make it acknowledge the presence of 'posts'. No errors appear in the console.
Upon inspecting Vue DevTools, I notice:
Hence, the 'router-view' seems to be functioning correctly, but the props are empty. Although I believed I was passing props from the main instance to the child component, it appears I may have made an error somewhere.
I will now showcase my existing code.
***HomePostList component
const HomePostList = Vue.component('home-post-list', {
props:['posts'],
template: `<div class="cell medium-8">
<div id="all-posts" class="all-posts" v-if="posts">
<div class="grid-x grid-margin-x">
<div class="post medium-6 cell" :class="{'medium-12':index===0}" v-for="(post,index) in posts">
<!-- rest of the component structure unchanged -->
</div>
</div>
});
***SinglePost Component
const SinglePost = Vue.component('single-post-template', {
props:['posts'],
template: `<div class="cell medium-8">
<div class="grid-x grid-margin-x">
<p>Single Post here</p>
</div>
</div>`
});
***Routes & Vue Instance
const routes = [
{
path: '/',
component: HomePostList,
props: true
},
{
path: '/post/:postId',
name: 'post',
component: SinglePost
}
];
const router = new VueRouter({
routes
});
new Vue({
// remaining copied code is left out intentionally for brevity
});
***index.php
<?php
/*
Template Name: Front
*/
get_header(); ?>
<!-- Home Page -->
<div class="grid-container">
<div class="grid-x grid-margin-x">
<!-- Main Post Container -->
<router-view></router-view>
<!-- Sidebar -->
<div id="sidebar" class="cell medium-4">
<sidebar-search></sidebar-search>
</div>
</div>
</div>
<?php get_footer();