Error using template slot and slot-scope on VueJS

Question

Error using a slot and slot-scope on VueJS to put into a column of a table.

A template as follows:

        <b-table hover striped :items="users" :fields="fields">
            <template slot="actions" slot-scope="data">
                <b-button variant="warning" @click="loadUser(data.item)" class="mr-2">
                    <i class="fa fa-pencil"></i>
                </b-button>
                <b-button variant="danger" @click="loadUser(data.item, 'remove')">
                    <i class="fa fa-trash"></i>
                </b-button>
            </template>
        </b-table>

After all, I'm able to get users on DB. And have success to show it on table. But, the buttons on slot can't. The idea is put two buttons:

The update button
The delete button

And each button manage one function.

<script>
import { baseApiUrl, showError } from '@/global'
import axios from 'axios'

export default {
    name: 'UserAdmin',
    data: function(){
        return {
            mode: 'save',
            user: {},
            users: [],
            fields: [
                { key: 'id', label: 'Código', sortable: true},
                { key: 'name', label: 'Nome', sortable: true},
                { key: 'email', label: 'E-mail', sortable: true},
                { key: 'adminMaster', label: 'Administrador', sortable: true,
                    formatter: value => value ? 'Sim' : 'Não'},
                {key: 'adminEnterprise', label: 'Chefe de Empreendimento', sortable: true,
                    formatter: value => value ? 'Sim' : 'Não'},
                { key: 'manager', label: 'Gerente', sortable: true,
                    formatter: value => value ? 'Sim' : 'Não'},
                { key: 'customer', label: 'Cliente', sortable: true,
                    formatter: value => value ? 'Sim' : 'Não'},
                { key: 'actions', label: 'Ações'}
            ],
        }
    },
    methods: {
        loadUsers() {
            const url = `${baseApiUrl}/users`
            axios.get(url).then(res => {
                this.users = res.data
            })
        },
        reset() {
            this.mode = 'save'
            this.user = {}
            this.loadUsers()
        },
        save() {
            const method = this.user.id ? 'put' : 'post'
            const id = this.user.id ? `/${this.user.id}` : ''
            axios[method](`${baseApiUrl}/users${id}`, this.user)
                .then(() => {
                    this.$toasted.global.defaultSuccess()
                    this.reset()
                })
                .catch(showError)
        },
        remove() {
            const id = this.user.id
            axios.delete(`${baseApiUrl}/users/${id}`)
                .then(() => {
                    this.$toasted.global.defaultSuccess()
                    this.reset()
                })
                .catch(showError)
        },
        loadUser(user, mode = 'save') {
            this.mode = mode
            this.user = { ...user }
        }
    },
    mounted() {
        this.loadUsers()
    }

}
</script>

What exactly is happening..? The buttons show up but do nothing? — gabriel.hayes
"actions" is not a slot for the b-table component.. (assuming you are using BootstrapVue). This question needs more details for a better answer... a Vue environment can vary greatly depending on what packages/libraries you use (for example, how do we know what b-table is and whether or not you're using it properly? Multiple UI frameworks have a b-table...) — gabriel.hayes
Everything is working normally except the addition of the buttons. I can add my table to the table via requests. What I can't do is put these two buttons in the "Actions" space. I am using BootstrapVue ^ 2.2.0. @user1538301 — Joan Oliveira
"vue": "2.5.17", "vuex": "3.0.1", "bootstrap-vue": "^2.2.0", "axios": "^0.19.0". @user1538301 — Joan Oliveira
Thanks for the clarification; I have an answer, it may or may not work for you, I'll post it shortly. — gabriel.hayes

gabriel.hayes gabriel.hayes · Accepted Answer · 2020-01-14T20:29:09

Alright, so, it looks like you're using an official release of BV 2.0., BV is preparing for Vue 3 which is revising the component-slotting system.

As such, BV has renamed the custom slots, you need to use cell({key}) like so:


            <template slot="cell(actions)" slot-scope="data">

Error using template slot and slot-scope on VueJS

1 Answers