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

Question

我有一个 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 的原因是因为我想遍历该数据并将该数组中的所有薪水数据格式化为货币格式（即千位后的逗号、货币符号等）

有什么想法吗？

谢谢。

Answer 1

您为 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() 之后，您应该进行其余的更改。