Vue 3 How update sum of all subtotals on change

user_4812154 0
Viewed 55

I have an app that collects data from a form then pushes a new counter object to an array (counters) then renders a counter component that can increment and decrement to update a subtotal property for that counter.

I am struggling with how to render a grandTotal of all subtotals as they change. I tried using a computed property but it only renders subtotal from last counter added.

This is my AddCounters component

<template>
  ... form
    <div class="total-price-wrapper">
      <p class="total-text">Total Price {{ getTotals }}</p>
    </div>
  </div>
  <div class="counters-wrapper">
    <ul class="counters-list">
      <li
        class="counter-item"
        v-for="(counter, index) in counters"
        :key="index"
      >
        <Counter :counter="counter" />
      </li>
    </ul>
  </div>
</template>

<script>
import Counter from "./Counter.vue";
export default {
  data() {
    return {
      counters: [],
      grandTotal: 0,
      price: "",
      type: "",
      location: "",
      quantity: 0,
      counterId: 0,
      subtotal: null,
    };
  },
  components: {
    Counter,
  },
  methods: {
    addCounter() {
      let newCounter = {
        id: this.counterId + 1,
        type: this.type,
        location: this.location || "In & Out",
        price: this.price,
        quantity: this.quantity,
        subtotal: this.subtotal,
      };

      if (this.price !== "" && this.type !== "") {
        this.counters.push(newCounter);
      }

      this.price = "";
      this.type = "";
      this.location = "";
      this.quantity = 0;
      this.subtotal = null;

      this.counterId = newCounter.id;
    },
  },
  computed: {
    //This only works on last counter rendered
    getTotals: function () {
      const grandTotals = this.counters
        .map((counter) => {
          console.log("Subtotals", counter.subtotal);
          return counter.subtotal;
        })
        .reduce((prev, curr) => (prev = curr), 0);
      return grandTotals;
    },
  },
};
</script>

This is what my counter component looks like.

<template>
  ... UI methods below are wired up
    <div class="counter-subtotal-wraper">
      <label class="counter-subtotal-label">Subtotal</label>
      <span id="" class="counter-subtotal-display">{{ counter.subtotal }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    counter: Object,
  },
  methods: {
    deleteCounter() {
      console.log("Delete Counter Called");
    },
    incrementQty(counter) {
      counter.quantity += 1;
      this.getSubtotal(counter);
    },
    decrementQty(counter) {
      if (counter.quantity > 0) {
        counter.quantity -= 1;
        this.getSubtotal(counter);
      } else {
        counter.quantity = 0;
      }
    },
    getSubtotal: function (counter) {
      let count = counter.quantity;
      let price = counter.price;
      let subTotal = count * price;
      counter.subtotal = subTotal.toFixed(2);
    },
  },
};
</script>
vuejs3 javascript
1 Answers
getTotals: function () {
      const grandTotals = this.counters
        .map((counter) => {
          console.log("Subtotals", counter.subtotal);
          return counter.subtotal;
        })
        .reduce((prev, curr) => (prev = curr), 0);
      return grandTotals;
    },

In the reduce above, you're setting the prev to be equal to the current value. In other words, you're overwriting the value every time, not doing addition.

Instead you should be adding to prev:

getTotals: function () {
      const grandTotals = this.counters
        .map((counter) => {
          console.log("Subtotals", counter.subtotal);
          return counter.subtotal;
        })
        .reduce((prev, curr) => prev += curr, 0);
      return grandTotals;
    },

You may also condense the map and reduce like so:

getTotals: function () {
      const grandTotals = this.counters
        .reduce((prev, counter) => prev += counter.subtotal, 0);
      return grandTotals;
    },

Edit

counter.subtotal is a String, so it needs to be cast a a Number before doing addition.

getTotals: function () {
      const grandTotals = this.counters
        .reduce((prev, counter) => prev += Number(counter.subtotal), 0);
      return grandTotals;
    },
user_138780710
Related