VueJS和WP Rest API

我在這裏有一個小問題，我想從Wordpress Rest API獲取帖子（json格式），我不明白我在這裏丟失了什麼。有人可以幫助我嗎？VueJS和WP Rest API

var App = new Vue({ 
el : '#app', 
data: { 
    posts: '' 
}, 
beforeCreate: function(){ 
    console.log('I am the first one!'); 
}, 
mounted: function(){ 
    console.log('mounted fired'); 
    posts = this.$resource('http://volkov.co.il/wp-json/wp/v2/posts?per_page=3'); 
    posts.get(function(response){ 
     this.$set('posts', response); 
    }); 
}});

這裏是我的html：

 <div id="app"> 

     <div class="row"> 
      <div class="large-12 columns"> 
       <article class="post-article" v-for="post in posts"> 
        <h1>post title</h1> 
        <h3>{{ post.id }}</h3> 
       </article> 
      </div> 
     </div> 

    </div> 

    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.js"></script> 
    <script src="js/app.js" charset="utf-8"></script>

正如你可以看到我使用VUE資源庫。我正在從本地機器運行此代碼。我在這裏錯過了什麼？感謝

來源

2017-07-26 vol4ikman

我相信this因爲你使用VueResource將是正確的，但如果不是，你可以使用任何的技術detailed here以確保它是。

也就是說，$set有三個參數。

this.$set(this, 'posts', response);

來源

2017-07-26 17:57:15 Bert

我得到的數據，但我無法通過Ajax響應後的數據運行的v型的... https://snag.gy/5Nb871.jpg – vol4ikman

@ vol4ikman如果我從URL中的數據在你的問題中，並用你的代碼，它似乎工作。 https://codepen.io/Kradek/pen/PKqpMK?editors=1010 – Bert

您使用的數據就像已經存在的對象。我需要從Ajax中獲取這些數據，並且只有在將它放入posts對象並運行循環後。 – vol4ikman

VueJS和WP Rest API

回答

相關問題