Vuejs 页面在 axios 请求返回数据之前加载

Question

问题

我尝试在 Laravel 项目中使用 vuejs + axios 从数据库加载数据。在本地，我可以使用 axios 发出请求，它返回数据，将其分配给变量，然后将数据输出到 DOM。

当我将相同的代码推送到生产环境时，axios 请求的执行时间要长一些，但似乎足够长，vuejs 在返回所有数据之前就已准备就绪，当数据尝试返回时，我会遇到恼人的“未定义属性”错误。被显示。有时，在数据加载之前，此错误会持续刷新 20 次以上。

我认为问题是什么

因此，我从阅读中猜测，axios 获取数据的速度没有达到应有的速度，因此 vuejs 已准备好开始提供数据，但 axios 还没有机会收集数据，从而导致undefined error

我读过和尝试过的内容

我读过，v-if对依赖于数据的对象使用语句应该可以解决这个问题。但事实并非如此，如果数据不存在，它所做的只是将对象隐藏起来。例如...

超文本标记语言

<!-- If user.name exists, display user.name -->
<div v-if="user.name">
    @{{ user.name }}
</div>

脚本语言

<script>
    new Vue({
        el: '#container',
        data: {
            user: {}
        },
        mounted() {
            this.getUserData();
        },
        methods: {
            getUserData(){
                axios.post('/user/get').then((response) => {

                    // Check the response was a success
                    if(response.data.status === 'success')
                    {
                        this.user = response.data.user;
                    }
                });
            },
        }
    })
</script>

这是行不通的，它只是在数据尚未加载时不显示任何内容。

问题

如何确保显示加载的数据并且不返回未定义的错误？我能想到的唯一方法是允许用户在尝试失败时“单击以检索数据”。

更多信息

我不使用 vue 模板、子/父结构或任何 vue 库。我通过 CDN 导入 vue.js 并在脚本中的页面上使用它，如上所示。我不确定这样使用它是否会导致任何此类限制，我只学习了 vue.js 的基础知识，这对公司和老板有用......

Answer 1

您可以添加“已加载”布尔属性来解决此问题。例如：

<script>
    new Vue({
        el: '#container',
        data: {
            isLoaded: false,
            user: {}
        },
        mounted() {
            this.getUserData();
        },
        methods: {
            getUserData(){
                axios.post('/user/get').then((response) => {

                    this.isLoaded = true;

                    // Check the response was a success
                    if(response.data.status === 'success')
                    {
                        this.user = response.data.user;
                    }
                });
            },
        }
    })
</script>

然后包装你的 html 以检查数据是否已加载：

<script>
    new Vue({
        el: '#container',
        data: {
            isLoaded: false,
            user: {}
        },
        mounted() {
            this.getUserData();
        },
        methods: {
            getUserData(){
                axios.post('/user/get').then((response) => {

                    this.isLoaded = true;

                    // Check the response was a success
                    if(response.data.status === 'success')
                    {
                        this.user = response.data.user;
                    }
                });
            },
        }
    })
</script>

然后你还可以显示一个加载程序：

<div v-if="isLoaded">
   <!-- If user.name exists, display user.name -->
   <div v-if="user.name">
       @{{ user.name }}
   </div>
</div>