Displaying subtotal in a list using Vue.js and conditional rendering with v-if statement

Question

Displaying subtotal in a list using Vue.js and conditional rendering with v-if statement

Seeking guidance on calculating a total for a vue.js list that contains invoice items. To illustrate, let's consider a scenario where a table of invoice items is being rendered. Here is the code snippet:

<table>
<template v-for="(invoice_item, index) in invoice_items" v-if="invoice_item.category === 'widgets'">
    <tr>
        <td>@{{ invoice_item.name }}</td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.rate"></td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.quantity"></td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.activation_fee"></td>
        <td class="subtotal">@{{ computeSubTotal(invoice_item) }}</td>
    </tr>
</template>
</table>

An individual subtotal is calculated for each row and displayed in the final column using the Vue.js JavaScript function below:

computeSubTotal: function(invoice_item) {
    return(this.formatPrice((parseFloat(invoice_item.rate) * parseFloat(invoice_item.quantity) + parseFloat(invoice_item.activation_fee))));
},

The current setup works effectively. However, the objective now is to show the total sum of all subtotals from the listed invoice items:

https://i.sstatic.net/9Qjwc.png

How can this be achieved?

Appreciate any input!

javascript vue.js vuejs2

Answer 1

Answer №1

Utilize computed properties for your calculations.

console.clear()

new Vue({
  el: "#app",
  data: {
    invoice_items: [
      {
        name: "Community / Support",
        rate: 5.20,
        quantity: 1,
        activation_fee: 3.00,
        category: "widgets"
      },
      {
        name: "Infrastructure",
        rate: 269.00,
        quantity: 3,
        activation_fee: 1.00,
        category: "widgets"
      },
      {
        name: "Infrastructure",
        rate: 269.00,
        quantity: 3,
        activation_fee: 1.00,
        category: "stuff"
      },
    ]
  },
  computed: {
    // potentially need a more descriptive name, but this is just an example
    itemsWithSubTotal() {
      return this.invoice_items.map(item => ({
          item,
          subtotal: this.computeSubTotal(item)
      }))
    },
    // calculate the total of all subtotalItems grouped by category
    totalByCategory() {
      // group the items by category
      let grouped = this.itemsWithSubTotal
        .reduce((acc, val) => {
          if (!acc[val.item.category]) 
            acc[val.item.category] = []
          acc[val.item.category].push(val)
          return acc
        }, {})
        
      // create an object with the total for each category
      return Object.keys(grouped).reduce((acc, val) => {
        acc[val] = grouped[val].reduce((total, item) => total += item.subtotal, 0)
        return acc
      }, {})
    }
  },
  methods: {
    computeSubTotal: function(invoice_item) {
      return ((parseFloat(invoice_item.rate) * parseFloat(invoice_item.quantity) + parseFloat(invoice_item.activation_fee)));
    },
  }
})

input {
  width: 5em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <table>
    <template v-for="(invoice_item, index) in itemsWithSubTotal" v-if="invoice_item.item.category === 'widgets'">
    <tr>
        <td>{{ invoice_item.name }}</td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.item.rate"></td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.item.quantity"></td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.item.activation_fee"></td>
        <td class="subtotal">{{ invoice_item.subtotal }}</td>
    </tr>
</template>
  </table>
  Total: {{totalByCategory["widgets"]}}
</div>

The itemsWithSubTotal might appear unusual.

itemsWithSubTotal() {
  return this.invoice_items.map(item => ({
      item,
      subtotal: this.computeSubTotal(item)
  }))
},

This essentially returns a new object with an item property referring to the original item and a subtotal property. I structured it this way to allow for v-model functionality in the template and automatic updates to the computed properties.

Answer 2

Utilize computed properties for your calculations.

console.clear()

new Vue({
  el: "#app",
  data: {
    invoice_items: [
      {
        name: "Community / Support",
        rate: 5.20,
        quantity: 1,
        activation_fee: 3.00,
        category: "widgets"
      },
      {
        name: "Infrastructure",
        rate: 269.00,
        quantity: 3,
        activation_fee: 1.00,
        category: "widgets"
      },
      {
        name: "Infrastructure",
        rate: 269.00,
        quantity: 3,
        activation_fee: 1.00,
        category: "stuff"
      },
    ]
  },
  computed: {
    // potentially need a more descriptive name, but this is just an example
    itemsWithSubTotal() {
      return this.invoice_items.map(item => ({
          item,
          subtotal: this.computeSubTotal(item)
      }))
    },
    // calculate the total of all subtotalItems grouped by category
    totalByCategory() {
      // group the items by category
      let grouped = this.itemsWithSubTotal
        .reduce((acc, val) => {
          if (!acc[val.item.category]) 
            acc[val.item.category] = []
          acc[val.item.category].push(val)
          return acc
        }, {})
        
      // create an object with the total for each category
      return Object.keys(grouped).reduce((acc, val) => {
        acc[val] = grouped[val].reduce((total, item) => total += item.subtotal, 0)
        return acc
      }, {})
    }
  },
  methods: {
    computeSubTotal: function(invoice_item) {
      return ((parseFloat(invoice_item.rate) * parseFloat(invoice_item.quantity) + parseFloat(invoice_item.activation_fee)));
    },
  }
})

input {
  width: 5em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <table>
    <template v-for="(invoice_item, index) in itemsWithSubTotal" v-if="invoice_item.item.category === 'widgets'">
    <tr>
        <td>{{ invoice_item.name }}</td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.item.rate"></td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.item.quantity"></td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.item.activation_fee"></td>
        <td class="subtotal">{{ invoice_item.subtotal }}</td>
    </tr>
</template>
  </table>
  Total: {{totalByCategory["widgets"]}}
</div>

The itemsWithSubTotal might appear unusual.

itemsWithSubTotal() {
  return this.invoice_items.map(item => ({
      item,
      subtotal: this.computeSubTotal(item)
  }))
},

This essentially returns a new object with an item property referring to the original item and a subtotal property. I structured it this way to allow for v-model functionality in the template and automatic updates to the computed properties.

Displaying subtotal in a list using Vue.js and conditional rendering with v-if statement

Answer №1

Similar questions

Specialized selection option with disabled function

How to resolve the error "TypeError: 'listener' argument must be a function" in Gulpfile.js?

I encountered an issue stating, "The function `req.redirect` is not recognized."

Using Django, CSS, and Javascript, create a dynamic HTML form that shows or hides a text field based on the selection

What is the best approach for developing an npm package containing multiple Vue directives? Should each directive have its own separate package, or should they

What could be the reason for not receiving any response from my Firestore query?

Adding data to a multidimensional array in JavaScript

How to position items at specific coordinates in a dropdown using JavaScript

When we find ourselves within a fat arrow function

Tips for organizing and concealing images within a Div for seamless transitions (no need for floats)

In a VueJS project, access an xlsx file stored in the public directory by reading its contents

Incorporating D3.js into Angular 6 for interactive click events

Having difficulties hosting static Vue.js files using Express

How can a personalized greeting be added in Node.js to welcome a user by their first name retrieved from a MongoDB database upon logging in?

Value in any array matches

Tips for retrieving the 'Created' value in vue.js

An in-depth guide on incorporating an Editor into a Reactjs project

Javascript malfunctions upon refreshing the div

When I use `console.log` with `req.body` in Node, the password is

React JS functionality does not support Bootstrap tooltips