[Vuejs]-How to get the total from each arrays of objects in Vue

by

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
    }
  }
}
👤Dev.DY

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
👤Abito Prakash

0👍

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>
👤sugars

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>

👤sandrooco

0👍

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/vuetify@1.4.0/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>
👤Narendra Jadhav

Leave a comment