如何使用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數據

回答

相關問題