Sum two items in table row

Question

I am putting together a simple price quote page using Vue, I am trying to sum two items in the same row. I tried using the computed property but I am struggling with the format. How should I format this to show to sum of disbursement and price for each row as per my example?

new Vue({
  el: '#search',
  data: {
    items: [
      { province: "Alberta", disbursement: 1, price: 300 },
      { province: "British Columbia", disbursement: 1, price: 75 },
      { province: "Manitoba", disbursement: 1, price: 10 },
      { province: "New Brunswick", disbursement: 1, price: 10 },
      { province: "Newfoundland & Labrador", disbursement: 1, price: 10 },
      { province: "Nova Scotia", disbursement: 1, price: 10 },
      { province: "Northwest Territories", disbursement: 1, price: 10 },
      { province: "Nunavut", disbursement: 1, price: 10 },
      { province: "Ontario", disbursement: 1, price: 10 },
      { province: "Prince Edward Island", disbursement: 1, price: 10 },
      { province: "Quebec", disbursement: 1, price: 10 },
      { province: "Saskatchewan", disbursement: 1, price: 10 },
      { province: "Yukon", disbursement: 1, price: 10 },
    ]
  },

computed: {
    total: function() {
    return parseInt(this.items.disbursement) +
        parseInt(this.items.price);
}
}

});

My HTML is formatted like this

<tr v-for="item in items">
    <th scope="row"><input type="text" v-model="item.province"/></th>
    <td>$<input type="number" v-model="item.price"/></td>
    <td>$<input type="number" v-model="item.disbursement"/></td>    
    <td>${{total}}</td>
</tr>

I am trying to add items.disbursement + items.price in the total

Possible duplicate of [VueJS How can I use computed property with v-for](https://stackoverflow.com/questions/40322404/vuejs-how-can-i-use-computed-property-with-v-for) — Mark, Apr 23 '19 at 18:46

score 0 · Accepted Answer · answered Apr 23 '19 at 18:47

Sounds like you'll want to iterate the 'items' and sum the properties of each 'item'.

The below code will return an array of integers, but you could format the array values however you want, just edit what is returned from the map function.

computed: {
    total: function() {
      return this.items.map(i => {
        return parseInt(i.disbursement) + parseInt(i.price)
      }
}

Sum two items in table row

1 Answers1