Question

我正在尝试从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);
                    },
                },
            });
        }
    }
);

Answer 1

在lazyLoad()中，您只需要将对this（Vue实例）的引用传递到getAggregatorData的回调中。只需使用arrow function即可完成，它会自动将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);
                }
            });
    },
},

将XMLHttpRequest数据动态呈现到Vue元素

1 个答案: