如何使用Vue.JS 3组合API对数组中的多个不同对象求和？

3gtaxfhh 于 2023-02-19 发布在 Vue.js

关注(0)|答案(2)|浏览(211)

我刚开始使用Vue。我正在努力计算数组对象中不同元素的和。
我的数组如下所示：

const products = ref([
  { id: 4028, name: 'PÃO FRANCÊS', img: 'https://s3-sa-east-1.amazonaws.com/rocky-2c5b937991b0cfc379dbf5f675740298/101448b5fafcae95596fbce5b5cc3f7f.jpg', price: 6.46 },
  { id: 4029, name: 'MOLHO DE TOMATE', img: 'https://rafasupervarejao.com.br/31563-large_default/8076809513661-molho-de-tomate-italiano-bolognese-barilla-400g.jpg', price: 6.46 },
  { id: 4030, name: 'MANTEIGA', img: 'https://rafasupervarejao.com.br/28528-large_default/7898924049365-manteiga-com-sal-reliquia-da-canastra-200g.jpg', price: 6.46 },
  { id: 4031, name: 'Feijão', img: 'https://m.media-amazon.com/images/I/71T01WVZh5L._AC_SL1500_.jpg', price: 6.46 },
])

我尝试对价格求和并将其设置为totalPrice，因此数组将按如下方式更改totalPrice：

id: 4028,
      name: "PÃO FRANCÊS",
      totalPrice: 6.46,

id: 4029,
      name: "MOLHO DE TOMATE",
      totalPrice: 12.92,

我相信我需要用下面这样的东西来总结他们，但我不知道如何做到这一点！

const totalPrice = products.price += products.price

如何计算价格总和并将其设置为totalPrice？
我已经旅行，所以发现类似的线程，但没有什么，我可以得到我的问题工作。

vue.js

来源：https://stackoverflow.com/questions/75484490/how-to-sum-multiple-different-objects-in-an-array-using-vue-js-3-composition-api

2条答案

按热度按时间

mefy6pfw1#

要计算所有products的price值之和，可以在computed中使用Array.prototype.reduce()：

const totalPrice = computed(() => {
  return products.value.reduce((acc, product) => {
    return acc + product.price
  }, 0)
})

更短的语法：

const totalPrice = computed(() =>
  products.value.reduce((sum, item) => sum + item.price, 0)
)

赞(0）回复(0）举报 2023-02-19

x4shl7ld2#

我猜您之所以专门询问Vue，是因为您希望动态计算总价，以便在product列表中添加或删除产品时更新它？
在Vue中，您可以使用computed property执行此操作：

const totalPrice = computed( () => products.value.reduce((total, product) => total + product.price, 0))

由于products具有React性，因此Vue可检测到其何时发生变化，并将自动重新计算totalPrice

赞(0）回复(0）举报 2023-02-19

我来回答

如何使用Vue.JS 3组合API对数组中的多个不同对象求和？

2条答案

相关问题

热门标签

最新问答