在 VueJS 上使用模板槽和槽范围时出错答案

【问题标题】：Error using template slot and slot-scope on VueJS在 VueJS 上使用模板槽和槽范围时出错
【发布时间】：2020-01-14 17:15:09
【问题描述】：

在 VueJS 上使用 slot 和 slot-scope 放入表的列时出错。

模板如下：

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

毕竟，我能够在 DB 上获取用户。并成功地在桌子上展示它。但是，插槽上的按钮不能。这个想法是放两个按钮：

更新按钮
删除按钮

每个按钮管理一个功能。

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

【问题讨论】：

到底发生了什么……？按钮显示但什么也不做？
"actions" 不是 b-table 组件的插槽。（假设您使用的是 BootstrapVue）。这个问题需要更多细节才能获得更好的答案...... Vue 环境可能会因您使用的包/库而有很大差异（例如，我们如何知道 b-table 是什么以及您是否正确使用它？多个 UI 框架都有一个b-table...)
除了添加按钮外，一切正常。我可以通过请求将我的表添加到表中。我不能做的是把这两个按钮放在“动作”空间。我正在使用 BootstrapVue ^ 2.2.0。 @user1538301
“vue”：“2.5.17”，“vuex”：“3.0.1”，“bootstrap-vue”：“^2.2.0”，“axios”：“^0.19.0 ”。 @user1538301
感谢您的澄清；我有一个答案，它可能适合你，也可能不适合你，我会尽快发布。

标签： javascript node.js vue.js dom-events

【解决方案1】：

好吧，看来您正在使用 BV 2.0 的正式版本。BV 正在为正在修改组件插槽系统的 Vue 3 做准备。

因此，BV 已重命名自定义插槽，您需要像这样使用cell({key})：


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

【讨论】：

这是我自 2.0.0987654323@ 以来一直在实施的 BV 的重大变化