Vuejs sum on event change

Question

I have following code that sum price of product to existed number when user increase the quantity of product. But the issue with my code is if user decrease the amount price still gets increased.

Code

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);
        // ISSUE: regardes that user increase or decrease the amount number this price gets increased
        this.subtotal = parseInt(this.subtotal) + parseInt(row.price);
    },
}

Console results

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

amount event:  2  // this is amount input by user

Question

How to properly increase and decrease price based on user action?

Answer 1

I have done it like this:

I changed subtotal to an computed propertie and sum it with .reduce() and i added a new property called singlePrice so we can multiply with it

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/element-ui@1.4.0/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.0/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>