如何在 Vue 中更改对象的属性？

问题描述

我尝试在 Vue 中为 chartjs 修改数据。

基本数据是带有supplier_id和supplier_name的采购订单

我想知道，每个供应商有多少订单：

        methods: {
            render() {

                let suppliers = []

                _.each(this.orders,function (value,key) {
                    if(!_.find(suppliers,{name: value.supplier_name})) {
                        suppliers.push({
                            name: value.supplier_name,num: 1
                        });
                    }
                    else {
                        let supplier = _.find(suppliers,{name: value.supplier_name})
                        let  data = {
                            name: value.supplier_name,num: supplier.num + 1
                        }
                        Vue.set(suppliers,suppliers.findindex(suppliers => suppliers.name === value.supplier_name),data)
                    }
                })
                console.log(suppliers)

            }
        },

我阅读了很多帖子，并创建了上面的解决方案。但这是最好的做法吗？

解决方法

您可以使这更简单，而无需使用 lodash 库：

render() {
   const hash = {};
   this.orders.forEach(o => {
      hash[o.supplier_name] = hash[o.supplier_name] + 1 || 1;
   })
   const suppliers = Object.keys(hash).map(name => ({ name: name,num: hash[name] }))
   console.log(suppliers);
}

这使用没有 lodash 的对象哈希（字典）来存储供应商/计数键值对，并删除多余的发现/程序逻辑/lodash。