CODEWITHSUNDEEP
vue.jsbootstrap-4bootstrap-vue
Dimas Prayoga
Dimas Prayoga

Reputation: 47

Set 2 keys in template #cell bootstrap table

Good Morning, I want to make multiplication of values from 2 different fields, i have commented on that part of the code which is my case. I am confused because I can only call 1 cell in the template, whereas I want to use multiplication by 2 different cells

<b-table
  :items="this.data.ListGiw"
  :fields="fields"
>
  <template #cell(qty)="data">
    @ {{data.value}} / {{data.value}}
    <!-- Here i want to make (qty value x ctns value) -->
  </template>
  <template #cell(ctns)="data">
    <b-badge :variant="status[1][data.value]">
      {{ status[0][data.value] }}
    </b-badge>
  </template>
</b-table>

fields: [
  { key: 'nomor', label: 'Baroce' },
  { key: 'barang', label: 'Goods' },
  { key: 'ctns', label: 'CTNS' },
  { key: 'qty', label: 'Qty' },
],
items: [
  {
    nomor: 'nomor 1',
    barang: 'Baju',
    ctns: '10',
    qty: '80'
  },
  {
    nomor: 'nomor 2',
    barang: 'Celana',
    ctns: '12',
    qty: '90'
  },
]

Upvotes: 1

Views: 1043

Answers (1)

Hiws
Hiws

Reputation: 10414

The cell slot scope has the entire item of the row, which you can use to access other properties on the item.

<template #cell(qty)="data">
  {{ data.item.ctns * data.value }}
</template>

Also, be aware that your qty and ctns properties are strings, and not numbers.

Example

new Vue({
  el: '#app',
  data() {
    return {
      fields: [{
          key: 'nomor',
          label: 'Baroce'
        },
        {
          key: 'barang',
          label: 'Goods'
        },
        {
          key: 'ctns',
          label: 'CTNS'
        },
        {
          key: 'qty',
          label: 'Qty'
        },
      ],
      items: [{
          nomor: 'nomor 1',
          barang: 'Baju',
          ctns: '10',
          qty: '80'
        },
        {
          nomor: 'nomor 2',
          barang: 'Celana',
          ctns: '12',
          qty: '90'
        },
      ]
    }
  }
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.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(qty)="data">
      {{ parseInt(data.item.ctns) * parseInt(data.value) }}
    </template>
  </b-table>
</div>

Upvotes: 1

Related Questions