VueJS и WP Rest API

У меня есть небольшая проблема, я хочу получать сообщения (в формате json) из Wordpress 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-resource. Я запускаю этот код с локальной машины. Что мне здесь не хватает? Спасибо


vue.js vue-resource wordpress-rest-api
person vol4ikman    schedule 26.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я полагаю this правильным, поскольку вы используете VueResource, но если это не так, вы можете использовать любой из методов подробно здесь, чтобы убедиться, что это так.

При этом $set имеет три аргумента.

this.$set(this, 'posts', response);
person Bert    schedule 26.07.2017
comment
Я получаю данные, НО я не могу запустить v-for через данные после ответа AJAX... snag.gy/ 5Nb871.jpg - person vol4ikman; 26.07.2017
comment
@vol4ikman Если я возьму данные из URL-адреса в вашем вопросе и использую их с вашим кодом, это сработает. codepen.io/Kradek/pen/PKqpMK?editors=1010 - person Bert; 26.07.2017
comment
Вы используете данные как уже существующий объект. Мне нужно получить эти данные от Ajax и только после этого поместить их в объект сообщений и запустить цикл. - person vol4ikman; 26.07.2017
comment
@vol4ikman Да, я понимаю. Это был пример того, что если вы действительно получаете данные, как вы сказали в своем первом комментарии, тогда ваш код будет работать. В своем ответе я показал, как установить данные, которые вы получили при вызове ajax. Если ваши данные по-прежнему не отображаются в вашем коде, проблема заключается в том, что вы не показали. - person Bert; 26.07.2017