How to return value from slot? Vuejs-CodePudding

vue-bootstrap has a table whose columns can be set via a template. But the fact is that the data for this template itself is taken from JSON, so I can’t figure out how to make a slot that will return a value back?

Example vue-bootstrap table template:

<b-table
      :items="data"
      :fields="fields"
      
 >

<template #cell(partners_total)="data">
        <span  v-if="data.item.hash">{{ data.item.hash }}</span>
      </template>

      <template #cell(income)="data">
        <span  v-if="data.item.hash">{{ data.item.hash }} QDT</span>
      </template>


</b-table>

As you can see, #cell(income)="data" as I understand it is a slot, but it returns inside the values that are inside :items="data".

How it is implemented I can not understand?

Data for example:

transactions: [
        {
          id: "hash",
          hash: "1643898128736718972368179623a6e6b"
        },
        {
          id: "income",
          hash: "1643898128736718972368179623a6e6b"
        },
         {
          id: "partners_total",
          hash: "1643898128736718972368179623a6e6b"
        }
      ],

CodePudding user response：

Bind the data you want to send to the slot.

Parent component

<div>
<v-slot :data="data" />
</div>

Access it in consuming components

Child component

<v-slot="{data}">
...
</slot>

CodePudding user response：

BootstrapVue documentation keeps a "Component Reference" section at the bottom of each Component page. In that section, you'll find a Slots section, if the component has slots. Here's the one for b-table.

Every defined slot can be opened and there you'll find a description of what has been bound/injected into each slot scope.

Usage example:

<template #cell(partners_total)="{item, value, field, index}">
  {{ value }}
  {{ item[field.key] }}
</template>

item: current row's data, as an object.
field: current field (column), as an object
value: what would normally render in this cell