Кнопка b не отображается в b-таблице VueJs

Я начинаю изучать Vue Js, моя проблема в том, что моя кнопка b не отображается в моей таблице, и я не понимаю почему.

Вот мой HTML код:

<div id="listlocales">
            <div class="overflow-auto">
                <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/vue@2.5.21/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>

А вот код моего скрипта Vue:

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

Я пытался использовать v-slot вместо ячейки, но все равно не работает... Кто-нибудь может помочь мне решить эту проблему.

Директива v-slot, которую использует Boostrap, была введена в Vue версии 2.6.0. Чтобы решить проблему, вам необходимо обновить версию Vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js"></script>
Вернуться на верх