时间戳

首页 > 解决方案 > 如何从Vue中的每个对象数组中获取总数

javascript - 如何从Vue中的每个对象数组中获取总数

问题描述

我有一个像这样的Vue组件：

<div v-for="item in items">
  <p>{{ item.name }}</p>
  <p>{{ item.price }}</p>
  <p>{{ item.qty }} </p>
  <p>{{ totalAmount }} </p>
</div>

以及来自 api 的数据，其中包含如下对象数组：

items: [{
    name: 'item 1',
    price: 2000,
    qty: 2,
  },
  {
    name: 'item 1',
    price: 3000,
    qty: 2,
  },
  {
    name: 'item 1',
    price: 4000,
    qty: 2,
  }]

我已经尝试过{{ item.price * item.qty }}，但我希望以后使用该值。

我想从每个数组中获取总数(price * qty)。像这样的东西：

[{
    name: 'item 1',
    price: 2000,
    qty: 2,
    totalAmount: 4000
  },{
    name: 'item 1',
    price: 3000,
    qty: 2,
    totalAmount: 6000
  },{
    name: 'item 1',
    price: 4000,
    qty: 2,
    totalAmount: 8000
  }]

谁能帮我怎么做？

标签： javascriptarraysvue.js

解决方案

您可以将其分离totalAmount为一个函数。

尝试这个。

// template

<div 
  v-for="item in priorities"
  :key="item.name">
    <p>name : {{ item.name }}</p>
    <p>price : {{ item.price }}</p>
    <p>qty : {{ item.qty }} </p>
    <p>{{ getTotalAmount(item) }} </p>
</div>

// script

export default {
  methods: {
    getTotalAmount (item) {
      return item.price * item.qty
    }
  }
}

推荐阅读