如何使用vue.js和wp rest API来渲染WordPress的其余api数据

我正在使用vue.js和wp rest API来做项目主题WordPress。但是现在我无法呈现数据。这里是我的代码如何使用vue.js和wp rest API来渲染WordPress的其余api数据

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({ 
 
    routes: [ 
 
    { path: '/', component: postList } 
 
    ] 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    router: router, 
 
    template: '<router-view></router-view>' 
 
}) 
 

 

 
**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新的甚至没有任何语言我只是一个初学者。

来源

2017-02-21 Truong Manh

您是否收到任何错误？ – Saurabh

嗨，谢谢你的回应。我认为我没有在这里得到任何错误。这是所有得到的：加载资源失败：服务器响应状态为403（禁止）https://mozbar.moz.com/bartender/url-metrics 调酒师API访问被拒绝。 chrome-extension：//eakacpaijcpapndcfffdgphdiccmpknp/scripts/content_page.js：2560 但我认为这是我的seo Mozbar的错误 –

@TruongManh你是否安装了vue-resource？我看到你正在使用'this。$ resource' –

在您的数据函数中，您将posts作为空字符串返回。它应该是一个空阵列。

现在您尝试使用v-for来循环显示一串帖子。您应该循环访问一系列后期对象。

而且，代替ready功能使用像beforeCreate

较早的钩子应该把你的问题的关心。

来源

2017-05-01 07:07:30

如何使用vue.js和wp rest API来渲染WordPress的其余api数据

回答

相关问题