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

Question

我尝试在 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)

            }
        },

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

Answer 1

只是解释一下Dan's answer，从原问题中的代码来看，第一次看可能没有多大意义。

1. 创建一个空对象。这将是我们将在下一步构建的“字典”。这个想法是我们可以用键/值填充这个对象以便于访问。键是supplier_names，值是每个supplier_name 有多少订单。

   render() {
     const hash = {};
   

2. 构建字典。由于this.orders 是一个数组，您可以使用forEach() 循环其值。获取每个订单的供应商名称 (o.supplier_name) 并将其用作在 hash 中查找值的键。如果找到，请将1 添加到其中并将其存储回hash 中的相同位置。如果找不到，请将值 1 存储在该位置 (|| 1)。同样，forEach() 将为this.orders 中的每个订单执行此操作。完成后，您应该有一个完整的 supplier_names 字典以及每个订单的数量。

     this.orders.forEach(o => {
       hash[o.supplier_name] = hash[o.supplier_name] + 1 || 1;
     })
   

3. 将对象“字典”转换为数组。由于哈希是一个对象，我们不能像以前那样使用forEach() 来迭代它们。然而，我们可以使用Object.keys() 得到一个只包含supplier_names 的数组。然后我们可以使用map() 来遍历它们并为每个返回一个转换后的结果。每个结果如下所示：{ name: <supplier name>, num: <number of orders> }

     const suppliers = Object.keys(hash).map(name => ({ name: name, num: hash[name] }))
     console.log(suppliers);
   }
   

虽然 Lodash 是一个很棒的库，但在这种情况下确实不需要它。对 JavaScript 中的内置函数有一个基本的了解会有很长的路要走。

Answer 2

您可以使这更简单，而无需使用 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。