时间戳

首页 > 解决方案 > 数据未显示在 console.log 中，但在模板中呈现良好

vue.js - 数据未显示在 console.log 中，但在模板中呈现良好

问题描述

我有一个 Vue 组件，我在其中进行 axois 调用以获取所有员工数据，将其存储在数组中，并将其显示在表格中。这工作得很好。

然而，我感到困惑的行为可以在下面的 getEmployees() 方法中看到，其中我有 console.log(this.employees);

当我检查控制台时，那里返回的对象是空白的并且没有任何员工数据，即使在模板中迭代时相同的数据对象正在显示所有员工数据。

看一下代码：

<template>
    <b-table striped hover :items="employees"></b-table>
</template>

<script>
    export default {
        data() {
            return {
                employees: []
            }
        },

        methods: {
            getEmployees() {
                axios.get('/api/employees')
                    .then(response => this.employees = response.data)

                console.log(this.employees);
            }
        },

        created() {
            this.getEmployees()
        }
    }
</script>

我在那里做 console.log 的原因是因为我想遍历该数据并将该数组中的所有薪水数据格式化为货币格式（即千位后的逗号、货币符号等）

有任何想法吗？

谢谢。

标签： vue.js

解决方案

您为 this.employees 赋值的范围在 promise 的 .then() 方法内。尝试扩展您的箭头函数，然后在 .then() 方法中放置 console.log() 调用。

<template>
    <b-table striped hover :items="employees"></b-table>
</template>

<script>
    export default {
        data() {
            return {
                employees: []
            }
        },

        methods: {
            getEmployees() {
                axios.get('/api/employees')
                    .then((response) => {
                        this.employees = response.data;
                        console.log(this.employees);
                      }
                   )


            }
        },

        created() {
            this.getEmployees()
        }
    }
</script>

在 .then() 之后，您应该进行其余的更改。

推荐阅读