Динамически отображать данные XMLHttpRequest в элемент Vue - PullRequest
Новая
       13

Динамически отображать данные XMLHttpRequest в элемент Vue

1 голос
/ 29 марта 2019

Я пытаюсь лениво загрузить список постов из WordPress REST API, и я хочу загружать больше новостей по щелчку HTML-элемента.

В настоящее время у меня возникают проблемы с доступом к исходному экземпляру Vue и обновлению this.data с помощью response, поскольку асинхронная функция означает, что экземпляр находится вне области видимости.

Я также дублирую код на данный момент в getAggregatorData, который является стандартным XMLHttpRequest для конечной точки.

Вопрос: как получить доступ к экземплярам Vue из асинхронного вызова (если это вообще возможно)?

Кто-нибудь имел опыт ленивой загрузки контента из REST API? Это мой первый рефакторинг с Vue для такого рода технологий, поэтому я рад ответить на любые вопросы. 

<div class="aggregator-load-more d-inline-block ta-centre my-3" v-cloak>
    <span class="bg-primary c-white px-1 py-0-5 tf-allcaps" v-on:click="lazyLoad">Load more</span>
</div>

 const news = getAggregatorData(
    'POST',
    WP_VARS.base_url + '/wp-json/wp/v2/' + aggregator.endpoint, 
    aggregator,
    function(error, response){
        if (error) {
            console.log('Error: could not retrieve data');
        } else {
            aggregator.offset = response.length;
            const vueInstance = new Vue({
                el: '.aggregator',
                data: {
                    largeItems: response.slice(0, 1),
                    smallItems: response.slice(1, response.length),
                },
                methods: {
                    lazyLoad() {
                        const moreStories = getAggregatorData(
                            'POST',
                            WP_VARS.base_url + '/wp-json/wp/v2/' + aggregator.endpoint, 
                            aggregator,
                            function(error, response) {
                                if(error) {
                                    console.log('Error: failed to retrieve more news stories');
                                } else {
                                    return response;
                                }
                            });
                        this.smallItems.push(moreStories);
                    },
                },
            });
        }
    }
);

1 Ответ

0 голосов
/ 30 марта 2019

В lazyLoad() вам просто нужно передать ссылку на this (экземпляр Vue) в обратный вызов getAggregatorData. Это можно просто сделать с помощью функции arrow , которая автоматически связывает this с текущим контекстом в методе, который является экземпляром Vue: 

methods: {
    lazyLoad() {
        getAggregatorData(
            ...
         ? (error, response) => {
                if(error) {
                    console.log('Error: failed to retrieve more news stories');
                } else {
                    /* `this` refers to the Vue instance */
                    this.smallItems.push(response);
                }
            });
    },
},
...