VueJS and WP Rest API

Question

I have a little issue here, I want to get posts (json format) from Wordpress Rest API, and I do not understand what am I missing here. Can someone helps me?

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

And here is my 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>

As you can see I am using vue-resource library. I am running this code from local machine. What am I missing here? Thanks

score 1 · Answer 1 · edited Jul 16 '22 at 03:17

1

I believe this will be correct because you are using VueResource, but if it is not, you can use any of the techniques detailed here to ensure it is.

That said, $set has three arguments.

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

edited Jul 16 '22 at 03:17

tony19

125,647
18
229
307

answered Jul 26 '17 at 17:57

Bert

80,741
17
199
164

I am get the data BUT I can not running v-for through the data after AJAX response... https://snag.gy/5Nb871.jpg – vol4ikman Jul 26 '17 at 18:36
@vol4ikman If I take the data from the URL in your question and use it with your code, it appears to work. https://codepen.io/Kradek/pen/PKqpMK?editors=1010 – Bert Jul 26 '17 at 18:45
You use data like already exists object. I need to get this data from Ajax and only after that put it inside posts object and run loop. – vol4ikman Jul 26 '17 at 19:15
@vol4ikman Yes, I understand. It was an example that *if* you are really getting the data as you said in your *first* comment, then your code will work. I've shown in my answer how to *set* the data you received in your ajax call. If your data is *still* not showing in your code, then the problem is somewhere you haven't shown. – Bert Jul 26 '17 at 19:17

VueJS and WP Rest API

1 Answers1