The b-button is not displayed in the b-table VueJs-CodePudding

I'm starting at Vue Js, my problem is that my b-button is not shown in my table and I don't understand why.

Here is my HTML code:

<div id="listlocales">
            <div >
                <b-button size ="sm" href="{% url 'newLocal'}" variant="outline-primary"> Nuevo Local</b-button>
                <br></br>
                <b-table
                id="my-table"
                striped responsive="sm"
                :items="items"
                :fields="fields"
                :per-page="recordsPerPage"
                :current-page="currentPage">
                    <template #cell(actions)='data'>
                        <b-button size="sm" variant="primary" @click="getLocales()"> Editar </b-button>
                        <b-button size="sm" variant="danger" href="{% url 'newLocal' %}"> Eliminar </b-button>
                    </template>
                </b-table>
                <b-pagination
                v-model="currentPage"
                :total-rows="totalPages"
                :per-page="recordsPerPage"
                aria-controls="my-table"
                ></b-pagination>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

And here is my script Vue code:

        <script>
            const listloc = new Vue({
                el: '#listlocales',
                data: {
                    items: [],
                    currentPage: 1,
                    totalPages: 0,
                    recordsPerPage: 10,
                    isLoading: false,
                    fields: [
                        { key: 'id', label: 'ID' },
                        { key: 'descripcion', label: 'Descripcion' },
                        { key: 'clave', label: 'Clave' },
                        { key: 'responsable', label: 'Responsable' },
                        { key: 'actions', label: ''}
                    ]
                }, ...
            });
        </script>
    </body>
</html>

I tried to use v-slot instead cell but isn't working anyway... Can someone help me for solving this issue.

CodePudding user response：

The v-slot directive, that Boostrap is using, was introduced in Vue version 2.6.0. To fix your issue you have to upgrade your Vue version

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>