Vue 数据值未在函数使用中更新

Question

所以我正在尝试使用 inertia-vue 和 axios 来延迟加载无限滚动的文章，后端是 laravel 6.0。因为我不想做不必要的请求，所以我将文章的总数交给了组件。我还在跟踪组件数据中已加载文章的数量。

props: {
    article_count: Number,
   },
data: function () {
    return {
        loaded: 0,
        scrolledToBottom: false,
        articles: [],
    }
},

加载的文章全部放入articles，如果用户滚动到底部，scrolledToBottom会跟踪。我已经检查过 this 是否引用了 vue 组件并具有它具有的数据属性。

methods: {
    load: function (nextToLoad) {
        for (let i = nextToLoad; i < nextToLoad + 10; i++){
            if (this.loaded <= this.article_count){
                this.$axios.get(route('api_single_article', i))
                    .then(response => {
                        if (response.status == 200 && response.data != null) {
                            console.log(this.loaded);
                            this.articles.push(response.data);
                        }
                        this.loaded++;
                    })
                    .catch(error => {
                        if (error.response.status != 404) {
                            console.log(error);
                            console.log(this.loaded);
                            this.loaded++;
                        }
                    });
            }
        }
        console.log(this.loaded);
    },
    scroll: function () {
        window.onscroll = () => {
            let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

            if (bottomOfWindow) {
                this.load(this.loaded + 1);
            }
        }
    }
}

奇怪的是，如果我在响应/错误箭头函数中记录 this.loaded 它总是 returns 0。如果我在响应之外做它也 returns 0 ，但是如果我记录 this loaded 属性在循环运行通过后具有假定值，尽管每次循环运行时都会记录它.我已经把这个给朋友看了，他也无法修复。这种行为对我来说似乎很奇怪，我不知道我应该怎么做，因为我对 vue 非常缺乏经验。

感谢您的帮助。

Answer 1

可能是并发问题。请记住，axios 调用是异步的，因此循环将在收到响应之前继续。

~~所以可能是同时收到了很多回复，然后 loaded 在那个时候仍然是 0。~~ 看起来这不会案子。 JavaScript 将一个接一个地处理回调。

我不确定 JavaScript 如何处理并发增量，所以我不能在这里准确解释它是如何起作用的。

从您的实现来看，您似乎希望将 load 函数转换为异步函数（使用 async）关键字，然后在axios 调用以确保您在发出另一个请求之前已收到响应。

看在兴趣的份上，也许可以查看您的网络选项卡并计算发出了多少请求。我怀疑提出的请求会比 this.article_count.

多

Vue 数据值未在函数使用中更新

Vue data value not updating for in function use

javascript

inertiajs

laravel

vue.js