Question

我正在尝试使用vue.js来显示我的帖子但是当我查看页面时没有显示任何内容。

我的app.js文件如下所示：

var App = Vue.extend({});
var postList = Vue.extend({
    template:'#post-list-template',
    data: function(){
        return {
            posts: ''
        }
    },

    ready: function(){
        posts = this.$resource('/wp-json/wp/v2/posts?per_page=20');

        posts.get(function(posts){
            this.$set('posts', posts);
        })
    }
})

var router = new VueRouter();
router.map({
    '/':{
        component: postList
    }
});
router.start(App, '#app');

我拥有所有外部资源，例如vue-resource.js，router和vue.js.

我的index.php看起来像这样：

<?php get_header(); ?>

    <div class="white-wrap">
        <div id="app">
            <router-view></router-view>
        </div>
    </div>

    <template id="post-list-template">
        <div class="container">
            <div class="post-list">
                <article v-for="post in posts" class="post">
                    <div class="post-content">
                        <h2>{{ post.title.rendered }}</h2>
                    </div>
                </article>
            </div>
        </div>
    </template>

<?php get_footer(); ?>

当我检查页面时，它看起来像这样：

现在我只是尝试使用标题，但如何使用vue.js显示帖子？

我的代码/文件中是否缺少某些内容？

我使用wp-json / wp / v2 / posts查看其余的api响应，它看起来像这样：

Answer 1

正如您所说，您使用的是最新的vue版本，不再有ready生命周期挂钩，您可以使用mounted挂钩。见Vue lifecycle hooks。
this存在范围问题。您在this函数中使用的ready未指向vue实例。使用胖箭头函数或设置指向正确的vue实例的变量并使用该变量
由于您在数据属性中初始化了posts属性，因此无法使用Vue.set

全部放在一起

mounted: function(){
        var self = this;
        posts = this.$resource('/wp-json/wp/v2/posts?per_page=20');

        posts.get(function(posts){
            self.posts = posts;
        })
    }

Answer 2

Data Fetching

导航后获取创建挂钩
导航前获取 beforeRouteEnter hook

WordPress标题没有使用vue.js与rest api显示

2 个答案: