如何在 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

您可以在不使用 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。

Answer 2

只是为了解释一下从原始问题中的代码判断，当您第一次看它时可能没有多大意义。

创建一个空对象。这将是我们将在下一步中构建的“字典”。这个想法是我们可以用 keys/values 填充这个对象以便于访问。键是 supplier_name，值是每个 supplier_name 有多少订单。
```
render() {
  const hash = {};
```
建立字典。由于 this.orders 是一个数组，您可以使用 forEach() 循环遍历它的值。获取每个订单的供应商名称 (o.supplier_name) 并将其用作在 hash 中查找值的键。如果找到一个，请将 1 添加到其中并将其存储回 hash 中的相同位置。如果找不到，请将值 1 存储在该位置 (|| 1)。同样，forEach() 将对 this.orders 中的每个订单执行此操作。完成后，您应该有一个包含 supplier_name 的完整字典以及每个订单的数量。
```
  this.orders.forEach(o => {
    hash[o.supplier_name] = hash[o.supplier_name] + 1 || 1;
  })
```
将对象“字典”转换为数组。由于 hash 是一个对象，我们不能像以前那样使用 forEach() 来迭代它们。然而，我们可以得到一个仅包含 supplier_name 的数组，使用 Object.keys(). Then we can use map() 迭代它们并 return 为每个数组转换结果。每个结果如下所示：{ name: <supplier name>, num: <number of orders> }
```
  const suppliers = Object.keys(hash).map(name => ({ name: name, num: hash[name] }))
  console.log(suppliers);
}
```

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

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

How to change a property of an object in Vue?

javascript

reduction

vue.js

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

How to change a property of an object in Vue?

javascript

reduction

vue.js

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