B-按钮不显示在b-table VueJs中。

Question

我从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槽代替手机，但无论如何都没用.有人能帮我解决这个问题吗。

Answer 1

引导程序使用的v槽指令是在Vue版本2.6.0中引入的.要解决问题，您必须升级Vue版本

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js"></script>