Vue.JS 2路由不工作。无法访问posts变量

中的第一个项目 Vue.js . 使用 WP REST API .

我可以让我的所有帖子都显示出来,但只要我尝试实现 Vue-router 显示所有帖子的组件, home-post-list ,一开始就死了 v-if="posts" 声明。

很明显, Vue 认为没有帖子,所以不会呈现任何其他内容,但我不知道如何让它识别 posts . 控制台中没有任何错误。

当我看到 Vue DevTools ,我明白了:

https://www.dropbox.com/s/5441k1kw8ocmzad/Screenshot%202018-05-22%2010.43.24.png?dl=0

所以, router-view 看起来工作正常,但道具是空的。我以为我在把道具从主实例传递给子组件,但也许我在这里做了一些错误的事情。

我将向您显示我当前的代码。

***homePostList组件

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">
                            <div class="img-bg" :class="{'first-post':index === 0}" :style="'background-image: url(' + post._embedded['wp:featuredmedia']['0'].source_url + ')'"></div>
                            <aside class="post-meta grid-x">
                              <div class="cell small-12">
                                <h3>{{ post.title.rendered | limitWords(6) }}</h3>

                              </div>
                              <div class="cell small-6">
                                <div class="post-category" v-for="(category,index) in post.cat_name.slice(0,1)">
                                  <a :href="'/category/' + category.slug">{{ category.cat_name }}</a>
                                </div>
                              </div>
                              <div class="cell small-6">
                                                <p><i class="fal fa-calendar-alt"></i> &nbsp;{{ post.date | parseTime }}</p>
                              </div>
                            </aside>
                          </div>
                        </div>
                    </div>
                  </div>`
});

***单柱组件

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>`
});

***路由&vue实例

const routes = [
  {
        path: '/',
        component: HomePostList,
        props: true
  },
  { 
        path: '/post/:postId',
        name: 'post',
        component: SinglePost
  }
];

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  router,
  data() {
    return{
      posts: [],
      searchTerm:'',
      searchPosts:[],
      currentRoute: window.location.pathname
    }
  },
  created (){
    var $this = this;
    axios
      .get(apiRoot + 'posts?_embed')
      .then(function (response) {
        $this.posts = response.data;
      }
    )
  },
  methods: {
    loadMorePosts: function(){
        var $this = this;
        axios
          .get(apiRoot + 'posts?_embed')
          .then(function (response) {
            $this.posts = response.data;
          }
        )
    },
  },
  computed:{

  },

});

***索引.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();