How to return value from slot? Vuejs

Viewed 57

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"
      class="mb-0"
 >

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

      <template #cell(income)="data">
        <span class="text-nowrap" 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"
        }
      ],
1 Answers

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>
Related