I have a Nuxt project with Buuefy implementation. I tried to make table with #empty slot when no data are available but it does not work. Documentation for Buefy table uses
<template #empty>
<div class="has-text-centered">No records</div>
</template>
My code looks like
<b-table :data="companies" id="agencyCompaniesTable" bordered>
<b-table-column v-for="column in columns" :key="column.id" v-bind="column">
<template v-if="column.searchable && !column.numeric"
#searchable="props">
<b-input v-model="props.filters[props.column.field]"
placeholder="Search..."
icon="magnify"
size="is-small" />
</template>
<template v-slot="props">
{{ props.row[column.field] }}
</template>
</b-table-column>
<template #empty>
<div class="has-text-centered">No records</div>
</template>
</b-table>
The code is identcal the table is empty but I dont see the text "No records". What could be the problem? Thanks for any help.
I am using an older version of buefy (0.7.0) and I resolved it this way
<template slot="empty">
<div class="has-text-centered">No records</div>
</template>