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（）。

let dict = {
      apple: { color: 'red'},
      orange: { color: 'orange' },
      mango: { color:'green' },
      jackfruit: { color: 'yellow' }
}
let array =  ['mango', 'apple' ]

console.log((({ mango, apple}) => ({ mango, apple }))(dict));

在.then（）中，您应该在之后进行其余的更改。

数据未在console.log中显示，但在模板

1 个答案: