Calculating the total sum in Vuejs when an event is triggered

Question

Calculating the total sum in Vuejs when an event is triggered

I am faced with a situation where the price of a product is added to an existing total when a user increases the quantity. However, the problem lies in the fact that even if the user decreases the quantity, the price continues to increase.

Solution

html

<el-input-number style="width: 100%;" ref="amount" v-on:change="amoutChanged($event, row)" v-model="row.amount" :min="1"></el-input-number>

script

data() {
    return {
        subtotal: 0,
    }
},
methods: {
    amoutChanged: function(event, row) {
        console.log('amount row: ', row);
        console.log('amount event: ', event);
        // PROBLEM: the price is always increased regardless of whether the quantity is increased or decreased
        this.subtotal = parseInt(this.subtotal) + parseInt(row.price);
    },
}

https://i.sstatic.net/4rkEJ.png

Results in Console

amount row:  {barcoded: "8995078803078", …}
  amount: (...)
  barcode_id: (...)
  barcoded: "8995078803078"
  price: (...)
  product: (...)

amount event:  2  // This is the input quantity by the user

Challenge

How can we update the total price correctly based on user actions of increasing or decreasing quantity?

javascript vue.js vuejs2

Answer 1

Answer №1

I tackled the problem in the following way:

Firstly, I transformed the subtotal property into a computed one and used .reduce() to sum up the values. Additionally, I introduced a new property called singlePrice to enable multiplication.

var Main = {
  data() {
    return {
      serial_numbers: [{
        barcode_id: '45634643',
        product: 'dfgs546',
        amount: 1,
        price: 100,
        singlePrice: 100,
      },{
        barcode_id: '23523fd',
        product: 'rgdg46546',
        amount: 1,
        price: 100,
        singlePrice: 100,
      },{
        barcode_id: 'fdghdh',
        product: '345634643',
        amount: 1,
        price: 100,
        singlePrice: 100,
      }],
      total: 0,
      num1: 1
    };
  },
  computed: {
     subtotal(){
    
       return this.serial_numbers.reduce((a,v)=> a + v.price,0)
     }
  },
  methods: {
    addRow() {
    var barcodes = document.createElement('tr');
      this.serial_numbers.push({
        barcode_id: '675476547',
        product: 'hjfgj67',
        amount: 1,
        price: 100,
        singlePrice: 100,
      });
    },
    removeElement: function(index) {
      this.serial_numbers.splice(index, 1);
    },
    amountChanged($event, index){
       let amount = $event;
       this.serial_numbers[index].amount = amount;
       this.serial_numbers[index].price = this.serial_numbers[index].singlePrice * amount;
    }
  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/vue/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/vue/lib/index.js"></script>
<div id="app">
  <table class="table table-bordered table-striped table-hover">
    <thead>
      <tr>
        <td><strong>Serial Number</strong></td>
        <td><strong>Product</strong></td>
        <td><strong>Amount</strong></td>
        <td><strong>Price</strong></td>
        <td width="50"></td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in serial_numbers" :key="index">
        <td>
          <el-input ref="barcoded" v-model="row.barcode_id"></el-input>
        </td>
        <td>
          <el-input ref="product" v-model="row.product" readonly></el-input>
        </td>
        <td>
          <el-input-number style="width: 100%;" ref="amount" @change="amountChanged($event, index)" v-model="row.amount" :min="1"></el-input-number>
        </td>
        <td>
          <el-input ref="price" v-model="row.price" readonly></el-input>
        </td>
        <td>
          <el-link :underline="false" type="danger" v-on:click="removeElement(index);" style="cursor: pointer"><i class="fa-2x el-icon-remove"></i></el-link>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <el-button type="primary" class="button btn-primary" round @click="addRow"><i class="el-icon-circle-plus"></i> Add row</el-button>
  </div>

  <el-row :gutter="10">
    <el-col :span="8" :offset="16">
      <table class="table table-bordered table-striped table-hover">
        <tbody>
          <tr>
            <th width="100"><strong>Sub total</strong></th>
            <td>
              {{subtotal}}
            </td>
          </tr>
          <tr>
            <th width="100"><strong>Total</strong></th>
            <td>
              {{total}}
            </td>
          </tr>
        </tbody>
      </table>
    </el-col>
  </el-row>
</div>

Answer 2

I tackled the problem in the following way:

Firstly, I transformed the subtotal property into a computed one and used .reduce() to sum up the values. Additionally, I introduced a new property called singlePrice to enable multiplication.

var Main = {
  data() {
    return {
      serial_numbers: [{
        barcode_id: '45634643',
        product: 'dfgs546',
        amount: 1,
        price: 100,
        singlePrice: 100,
      },{
        barcode_id: '23523fd',
        product: 'rgdg46546',
        amount: 1,
        price: 100,
        singlePrice: 100,
      },{
        barcode_id: 'fdghdh',
        product: '345634643',
        amount: 1,
        price: 100,
        singlePrice: 100,
      }],
      total: 0,
      num1: 1
    };
  },
  computed: {
     subtotal(){
    
       return this.serial_numbers.reduce((a,v)=> a + v.price,0)
     }
  },
  methods: {
    addRow() {
    var barcodes = document.createElement('tr');
      this.serial_numbers.push({
        barcode_id: '675476547',
        product: 'hjfgj67',
        amount: 1,
        price: 100,
        singlePrice: 100,
      });
    },
    removeElement: function(index) {
      this.serial_numbers.splice(index, 1);
    },
    amountChanged($event, index){
       let amount = $event;
       this.serial_numbers[index].amount = amount;
       this.serial_numbers[index].price = this.serial_numbers[index].singlePrice * amount;
    }
  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/vue/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/vue/lib/index.js"></script>
<div id="app">
  <table class="table table-bordered table-striped table-hover">
    <thead>
      <tr>
        <td><strong>Serial Number</strong></td>
        <td><strong>Product</strong></td>
        <td><strong>Amount</strong></td>
        <td><strong>Price</strong></td>
        <td width="50"></td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in serial_numbers" :key="index">
        <td>
          <el-input ref="barcoded" v-model="row.barcode_id"></el-input>
        </td>
        <td>
          <el-input ref="product" v-model="row.product" readonly></el-input>
        </td>
        <td>
          <el-input-number style="width: 100%;" ref="amount" @change="amountChanged($event, index)" v-model="row.amount" :min="1"></el-input-number>
        </td>
        <td>
          <el-input ref="price" v-model="row.price" readonly></el-input>
        </td>
        <td>
          <el-link :underline="false" type="danger" v-on:click="removeElement(index);" style="cursor: pointer"><i class="fa-2x el-icon-remove"></i></el-link>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <el-button type="primary" class="button btn-primary" round @click="addRow"><i class="el-icon-circle-plus"></i> Add row</el-button>
  </div>

  <el-row :gutter="10">
    <el-col :span="8" :offset="16">
      <table class="table table-bordered table-striped table-hover">
        <tbody>
          <tr>
            <th width="100"><strong>Sub total</strong></th>
            <td>
              {{subtotal}}
            </td>
          </tr>
          <tr>
            <th width="100"><strong>Total</strong></th>
            <td>
              {{total}}
            </td>
          </tr>
        </tbody>
      </table>
    </el-col>
  </el-row>
</div>

Calculating the total sum in Vuejs when an event is triggered

Solution

Results in Console

Challenge

Answer №1

Similar questions

What is the reason for Rich file manager to include filemanager.config.json instead of simply adding an image to the text

Learn how to manipulate data within a MongoDB database schema using Node.js and Mongoose: inserting, saving, and updating records

Using Regular Expressions in an ExpressJS Router

Adjust the number of columns based on the minimum screen resolution using columnizer

JavaScript - Assigning a class to an element based on an array

non-concurrent in Node.js and JavaScript

In Vue2, you can utilize $ref to retrieve information from a child component and transfer it into the parent component's data

Running a series of functions consecutively with JQUERY

Vue for Number Crunching

Generating documents in Word or PDF format using PHP and Angular data

Connect data dynamically to the p-table based on columns

Warning from React 17: Unexpected presence of <a> tag inside <div> tag in server-rendered HTML

An issue arises when attempting to utilize URL parameters within a loader

Advantages of incorporating lazy loading in a Vue Single Page Application:

"Is there a way to automatically delete items from a v-for loop after a

Retrieve information from a JSON API on one server and showcase it on an HTML page hosted on a different server

Steps to creating an Ajax JQuery in WordPress with promises

Accessing Facebook through the React create app login

Modifying state within useEffect while also including the redux value as a dependency array

Is there a way in MVC3 / .net4 to convert a JSON formatted JavaScript array into a C# string array?