CODEWITHSUNDEEP
vue.js
Marco Rispoli
Marco Rispoli

Reputation: 65

Table bootstrap vue

I created a table with bootstrap vue. I would need the price value to increase based on the quantity selected. So if I select 2 products, the price will be multiplied by 2 and so on. My problem is that I can't access the value of the quantity cell. 

<template v-slot:cell(price)="data">
            <span>{{data.item.price = data.item.price * value}}</span>
          </template>
          <template v-slot:cell(quantity)="data">
            <b-col sm="4">
              <b-form-input value="1" min="1" :max="data.item.quantity" type="number"></b-form-input>
            </b-col>
          </template>

enter image description here

Upvotes: 0

Views: 834

Answers (1)

Hiws
Hiws

Reputation: 10414

Instead of a global value in your data, you should store the input value on each object. That way it's per-row.

new Vue({
  el: '#app',
  data() {
    return {
      fields: [
        'price',
        'quantity',
        'total'
      ],
      items: [{
          price: 550,
          quantity: 5,
          amount: 1
        },
        {
          price: 295,
          quantity: 16,
          amount: 1
        },
        {
          price: 199,
          quantity: 3,
          amount: 1
        }
      ]
    }
  }
})
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-table :items="items" :fields="fields">
    <template #cell(quantity)="{ item }">
    	<b-input v-model="item.amount" min="1" :max="item.quantity" type="number" number></b-input>
    </template>
    <template #cell(total)="{ item }">
    	{{ item.price * (item.amount || 1)}}
    </template>
  </b-table>
</div>

Upvotes: 1

Related Questions