How to get the total from each arrays of objects in Vue

Question

I have a vue component like this:

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

And a data from an api with an array of objects like this:

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

I have tried {{ item.price * item.qty }} but I want that value to be used later.

I want to get the total from each array (price * qty). something like this:

[{
    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
  }]

can anyone help me how to do this?

you can modify the array of items first before you use it. items.forEach(item => item.totalAmount = item.qty * item.price); and then you can use {{ item.totalAmount }} — wakakak
– wakakak, Commented Sep 30, 2019 at 4:57

Dev.DY · Accepted Answer · 2019-09-30 05:16:44Z

1

You can separate totalAmount as a function.

Try this.

// 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
    }
  }
}

answered Sep 30, 2019 at 5:16

Dev.DY

4553 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abito Prakash · Accepted Answer · 2019-09-30 05:02:09Z

0

You can define a totalAmount getter to each object in items using Object.defineProperty.

const items = [
  {
    name: "item 1",
    price: 2000,
    qty: 2
  },
  {
    name: "item 1",
    price: 3000,
    qty: 2
  },
  {
    name: "item 1",
    price: 4000,
    qty: 2
  }
];

items.forEach(item => {
  Object.defineProperty(item, "totalAmount", {
    get: function() {
      return item.price * item.qty;
    }
  });
});

console.log(items[0].totalAmount) // prints 4000

answered Sep 30, 2019 at 5:02

Abito Prakash

4,8002 gold badges16 silver badges28 bronze badges

Comments

sugars · Accepted Answer · 2019-09-30 05:14:39Z

new Vue({
  el: "#app",
  data: {
    items: []
  },
  mounted() {
    this.httpGet()
  },
  methods: {
    httpGet() {
      setTimeout(() => {
        let list = [{
            name: 'item 1',
            price: 2000,
            qty: 2,
          },
          {
            name: 'item 1',
            price: 3000,
            qty: 2
          }
        ]
        this.items = list.map(v => {
          return {
            name: v.name,
            price: v.price,
            qty: v.qty,
            totalAmount: v.price * v.qty
          }
        })
      }, 2000)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

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

sandrooco · Accepted Answer · 2019-09-30 05:16:19Z

0

Probably the simplest solution:

const mappedItems = this.items.map(item => ({...item, totalAmount: item.qty * item.price}));

Then you can use it in your template as you'd expect like <p>{{ item.totalAmount }} </p>

answered Sep 30, 2019 at 5:16

sandrooco

8,88611 gold badges56 silver badges101 bronze badges

Comments

Narendra Jadhav · Accepted Answer · 2019-09-30 05:31:31Z

As you already looping using v-for so you could create method for calculating a total amount like below

methods: {
  getTotal(item) {
     return (item.qty * item.price)
  }
}

Please check below working code snippet.

new Vue({
  el: '#app',
  methods: {
    getTotal(item) {
      return item.qty*item.price
    },
  },
  data() {
    return {
      items: [{"name":"item 1","price":2000,"qty":2},{"name":"item 1","price":3000,"qty":2},{"name":"item 1","price":4000,"qty":2}]
    }
  }
})

.container span {
    padding: 10px;
    border-bottom: 1px solid;
    display: inline-block;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
    <div class="container" v-for="item in items">
      <span>{{ item.name }}</span>
      <span>{{ item.price }}</span>
      <span>{{ item.qty }} </span>
      <span>{{getTotal(item)}}</span> 
    </div>
</div>

Collectives™ on Stack Overflow

How to get the total from each arrays of objects in Vue

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related