我应该在这里使用计算属性吗？答案

【问题标题】：Should I use a computed property here?我应该在这里使用计算属性吗？
【发布时间】：2018-10-11 07:26:13
【问题描述】：

我正在听 Adam Wathan 的播客，他和 Chris Fritz（Vue 核心团队的成员）正在讨论计算属性，以及思考何时使用方法来执行任务或计算属性的好方法是如果你要“返回”一个值，你应该使用计算属性。

现在我有点困惑，是否应该通过使用计算属性来处理这种特殊情况。

下面是一个员工列表组件，我在其中获取数据库中所有员工的列表，并使用 bootstrap-vue 将它们显示在一个表中。曲线球是工资被存储为整数，我想在显示它们时用逗号格式化它们。正如您将看到的，我添加了一个肮脏的黑客来做到这一点，这绝对不是正确的方法。所以我想知道解决这个问题的理想方法是什么？

<template>
    <div>
        <h3>All Employees</h3>
        <b-table striped hover :items="formattedEmployees"></b-table>
    </div>
</template>

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

        methods: {
            getEmployees() {
                axios.get('/api/employees')
                    .then(response => {
                        this.employees = response.data
                        this.employees.forEach(function (employee) {
                            employee.salary = '$ ' + employee.salary.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                        })
                    })
            }
        },

        created() {
            this.getEmployees()

            this.$root.$on('employee-added', data => {
                this.employees.push(data)
            })
        }
    }
</script>

哦，在底部您可以看到，在创建此组件时，我正在侦听一个全局事件，该事件在通过 Add Employee 组件添加员工时被触发。这有点坏了 - 它添加了第一个新员工就好了，但是当我开始输入添加另一个员工时，列表中第一个员工的姓名会随着我输入而改变。

感谢您提供的任何见解。

【问题讨论】：

标签： vue.js

【解决方案1】：

只需使用Number.prototype.toLocaleString。它是在 JavaScript 1.5（于 1999 年推出）中实现的，因此它基本上得到主流浏览器的支持。

var num = 34523459
console.log('$ ' + num.toLocaleString())

【讨论】：