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?

What is el-input-number here? How do we know if + or - was clicked? — palaѕн
– palaѕн, Commented Jun 2, 2020 at 5:14
@Ifaruki in v-for <tr v-for="(row, index) in serial_numbers" :key="index"> — mafortis
– mafortis, Commented Jun 2, 2020 at 5:14
@palaѕн not sure but maybe in docs has something that i didn't see element.eleme.io/#/en-US/component/input-number#inputnumber — mafortis
– mafortis, Commented Jun 2, 2020 at 5:15

Ilijanovic · Accepted Answer · 2020-06-02 06:04:11Z

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/[email protected]/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/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>

edited Jun 2, 2020 at 6:04

answered Jun 2, 2020 at 5:23

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

mafortis Over a year ago

[Vue warn]: The computed property "subtotal" is already defined in data. Demo code jsfiddle.net/robertnicjoo/ahLr9vyu/6

Ilijanovic Over a year ago

@mafortis yea, you need to remove it from data

Ilijanovic Over a year ago

@mafortis i have updated it, you need to remove the subtotal in data

mafortis Over a year ago

Computed property "subtotal" was assigned to but it has no setter.

Ilijanovic Over a year ago

@mafortis check this out

|

Collectives™ on Stack Overflow

Vuejs sum on event change

Code

Console results

Question

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code

Console results

Question

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related