how to update data of only selected value from v-for loop of array in vue-cli

Question

I have created a table which display the product Price, Quantity, Cost, Total If quantity is changed for any product in the table row the value of total also have to update according to the formula quantity * cost. The products array contains cost and name.Everything is working fine but what i don't know is if i am changing quantity of one product all the products in v-for loop getting affected and all products quantity is changing, instead of this how can i change quantity for only updated product and I provided default quantity value as 0 for all products hence only products with more than 0 quantity i can use for my further operations

## Html Code ## 
<table class="table table-striped">
          <thead>
            <tr>
              <td>S.No#</td>
              <td>Product</td>
              <td>Cost</td>
              <td>Quantity</td>
              <td>Total</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="p in products">
              <td>1</td>
              <td>{{p.item}}</td>
              <td>{{p.cost}}</td>
              <td><input type="number" class="form-control qty-box" name="" v-model='qty'></td>
              <td>{{p.cost*qty}}</td>
            </tr>
          </tbody>
        </table>
## Vue Js code ##
<script>
export default {
  name: 'app',
  data () {
    return {
      counter:8,
      qty:0,
      products:[
      {'item':'timber','cost':250,'id':1},
      {'item':'wood','cost':240,'id':2},
      {'item':'primer','cost':120,'id':3},
      {'item':'plywood','cost':360,'id':4},
      {'item':'marker','cost':220,'id':5},
      {'item':'roughwood','cost':480,'id':6},

      ],
      msg: 'Counter',
    }
  }
}
</script>

please create live demo or snippet for this ?

Niklesh Raut
– Niklesh Raut

2018-08-02 09:21:52 +00:00
Commented Aug 2, 2018 at 9:21 — Niklesh Raut
– Niklesh Raut, Commented Aug 2, 2018 at 9:21

latovic · Accepted Answer · 2018-08-02 09:25:57Z

1

You can't use one number for all rows.

    <table class="table table-striped">
          <thead>
            <tr>
              <td>S.No#</td>
              <td>Product</td>
              <td>Cost</td>
              <td>Quantity</td>
              <td>Total</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="p in products">
              <td>1</td>
              <td>{{p.item}}</td>
              <td>{{p.cost}}</td>
              <td><input type="number" class="form-control qty-box" name="" v-model='p.qty'></td>
              <td>{{p.cost*p.qty}}</td>
            </tr>
          </tbody>
        </table>

So instead of v-model='qty' use v-model='p.qty' and also instead of this {{p.cost*qty}} use {{p.cost*p.qty}}

answered Aug 2, 2018 at 9:25

latovic

9276 silver badges11 bronze badges

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

Comments

Max Maximilian · Accepted Answer · 2018-08-02 09:41:34Z

0

Follow my example in codepen or the code below:

HTML:

<table id="app" class="table table-striped">
      <thead>
        <tr>
          <td>S.No#</td>
          <td>Product</td>
          <td>Cost</td>
          <td>Quantity</td>
          <td>Total</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="p in products">
          <td>1</td>
          <td>{{p.item}}</td>
          <td>{{p.cost}}</td>
          <td><input type="number" class="form-control qty-box" name="" v-model='p.qt'></td>
          <td>{{p.cost*p.qt}}</td>
        </tr>
      </tbody>
    </table>

JavaScript:

vue = new Vue({
 el: "#app",
  name: 'app',
  data () {
    return {
      counter:8,
      products:[
      {'item':'timber','cost':250,'id':1, 'qt':1},
      {'item':'wood','cost':240,'id':2, 'qt':1},
      {'item':'primer','cost':120,'id':3, 'qt':1},
      {'item':'plywood','cost':360,'id':4, 'qt':1},
      {'item':'marker','cost':220,'id':5, 'qt':1},
      {'item':'roughwood','cost':480,'id':6, 'qt':1},

      ],
      msg: 'Counter',
    }
  }
});

A little suggestion: Personally, I think, using v-text in HTML with Vue is better than brackets because when using brackets the page will show those before vue parses it which isn't very pretty. IMHO.

edited Aug 2, 2018 at 9:41

answered Aug 2, 2018 at 9:35

Max Maximilian

6003 silver badges21 bronze badges

1 Comment

Max Maximilian Over a year ago

Notice that I've added qt parameter to all of your products. Also, see my edited answer

vovchisko · Accepted Answer · 2018-08-02 09:28:43Z

0

Add quantity to each product. You have one quantity value for all products now.

edited Aug 2, 2018 at 9:28

answered Aug 2, 2018 at 9:23

vovchisko

2,2971 gold badge24 silver badges29 bronze badges

1 Comment

sachin developer Over a year ago

i have used only one quantity value because the products are iterated by v-for loop

Collectives™ on Stack Overflow

how to update data of only selected value from v-for loop of array in vue-cli

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related