bootstrap-vue 相关问题

VueJs：如何根据另一个元素更新元素的宽度？

我正在构建Trivia应用程序，并且我有一个 元素，该元素每10秒更改一次。我想将单选按钮组组件（b-form-group是Bootstrap-Vue组件）的宽度与...

了解如何正确使用Bootstrap vue添加分页

我正在使用Vue和Vue Bootsrap。我编写了以下代码： ] ] >>

Bootstrap Vue在使用卡时不显示css

最近，我已经使用bootsrap vue进行了宣传。我写了以下代码： []]]]]]]]]]] // app.js import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' 将其写入app.js文件中 有关详细说明https://bootstrap-vue.js.org/docs/ 尝试在html元素上使用类，如： <b-card-group> <b-card class="cards"> <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text> </b-card> </b-card-group>

在beforeRouteEnter中是否有一种方法可以显示Bootstrap-Vue $ toast反馈？

我有一个可加载单个用户的组件，因此我使用vue-router防护程序来加载数据，并在发生错误的情况下重定向回用户列表组件。有没有办法显示vue-bootstrap $ toast？ ...

了解如何在Bootstrap-vue中使用分页

我已经写了下面的代码： 由于尚不清楚您是需要客户端分页还是服务器端，因此我在代码段中都做了一个示例。 为简单起见，每页3张，但您可以将其更改为9张。 第一个加载时会获取初始页面，然后每当页面更改时都使用watcher来调用API，该API会使用新页面调用一个方法，然后使用该新页面检索该位置并将我们的旧数据替换为新数据。 [第二个在页面加载时加载所有数据，而是基于per_page属性对数据数组进行切片，以便仅显示该页面的项目。为此，我使用了一个计算属性，该属性会根据其中使用的属性自动更新。 两个分页都用页面元素容器的aria-controls定义了id。这用于告诉屏幕阅读器分页会更改哪些元素。 row，col-*，border，mx-auto，h2和text-center类是用于样式和布局的类，它不是实际解决方案的一部分，因此您可以自由更改或删除它们。 new Vue({ el: '#app', computed: { pagination2CurrentItems() { const startIndex = (this.pagination2.current_page - 1) * this.pagination2.per_page; const endIndex = startIndex + this.pagination2.per_page; return this.pagination2.items.slice(startIndex, endIndex) } }, created() { this.getPagination1Data() this.getPagination2Data() }, filters: { capitalizeFirstLetter(value) { return value.charAt(0).toUpperCase() + value.slice(1) } }, data() { return { pagination1: { items: [], per_page: 3, total_rows: 0, current_page: 1 }, pagination2: { items: [], per_page: 3, total_rows: 0, current_page: 1 } } }, methods: { getPagination1Data(page = 1) { fetch(`https://reqres.in/api/unknown?page=${page}&per_page=3`) .then((response) => { return response.json(); }) .then((data) => { this.pagination1.total_rows = data.total; this.pagination1.items = data.data; }); }, getPagination2Data() { /* This endpoint only has 12 items total, so this will get all in one call */ fetch(`https://reqres.in/api/unknown?per_page=12`) .then((response) => { return response.json(); }) .then((data) => { this.pagination2.total_rows = data.total; this.pagination2.items = data.data; }); } }, watch: { 'pagination1.current_page'(newPage) { this.getPagination1Data(newPage) } } }) <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script> <link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/> <div id="app" class="container"> <div id="tools_list_1" class="row"> <div class="col-12 h2 text-center"> Server pagination </div> <article class="col-3 mx-auto border" v-for="tool in pagination1.items"> <div class="title"> <h3>{{ tool.name | capitalizeFirstLetter }}</h3> </div> <div class="description"> {{ tool.pantone_value }} </div> </article> </div> <div class="row mt-2"> <div class="col-12"> <b-pagination v-model="pagination1.current_page" :per-page="pagination1.per_page" :total-rows="pagination1.total_rows" aria-controls="tools_list_1" > </b-pagination> </div> </div> <div id="tools_list_2" class="row"> <div class="col-12 h2 text-center"> Client pagination </div> <article class="col-3 mx-auto border" v-for="tool in pagination2CurrentItems"> <div class="title"> <h3>{{ tool.name | capitalizeFirstLetter }}</h3> </div> <div class="description"> {{ tool.pantone_value }} </div> </article> </div> <div class="row mt-2"> <div class="col-12"> <b-pagination v-model="pagination2.current_page" :per-page="pagination2.per_page" :total-rows="pagination2.total_rows" aria-controls="tools_list_2" > </b-pagination> </div> </div> </div>

在bootstrap-vue中如何将FileReader转换为blob并上传到服务器？

在@ vue / cli 4.1.1应用程序中，我使用bootstrap-vue和b-form-file组件来上传图像https://bootstrap-vue.js.org/docs/components/form-file/#multiple-files定义：

[BootstrapVue警告]：弹出框-无法在文档中找到目标元素

我正在使用Bootstrap-Vue中的popover，但出现此错误：[BootstrapVue警告]：popover-无法在文档中找到目标元素。一切正常，但是我有很多警告，并且...

如何删除在BootstrapVue中的b-form-checkbox中单击后显示的边框

单击选择框中的选项后，我试图删除边框。这里是vue部分： [ 怎么样？ input.custom-control-input:focus { outline:none !important; outline-width: 0 !important; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }

bootstrap-vue：b-form-datepicker直到被悬停时才更新为v-model

我正在使用b-form-datepicker，我想使用一个附加按钮，该按钮会将所选日期重置为默认状态。该按钮还重置另一个日期选择器，一个输入表单和一个下拉菜单。...

只有两个复选框都被激活时，提交按钮才可以单击

我正在使用bootstrap-vue和vuelidate。仅当两个复选框均已激活时，才可以单击“提交”按钮。不幸的是，我无法通过bootstrap中的复选框来获取它。 https：// ...

在模态中使用Vuex商店会在模态关闭后重置商店

我将Nuxt 2.11与“ bootstrap-vue” 2.5.0结合使用，我创建了一个商店，其中包含一个简单的列表和一个变量器，用于向该列表中添加元素。 // store / issues.js export const state =（）=>（{list：[]，}）...

将b表的每个单元格中的文本切换到输入框并返回

vue的新手，到目前为止，我很喜欢它。基本上尝试使用BV表来创建类似表格的Excel。当我单击单元格文本时，我希望将其替换为输入框，然后返回到...

bootstrap-vue：如何通过b-tab识别悬停事件

我正在尝试将选项卡标题悬停，不仅是单击时，还会更改引导引导b选项卡的活动选项卡。我无法隔离此事件。在下面的Codepen示例中，...

Vue-如何从B表访问元素

我正在使用带有“：fields”和“：items”的“ b-table”，我已经知道如何使用“ v-slot：cell（keyname）”自定义特定字段。但是知道我想获取此列中每个元素的值，然后...

如何在引导程序中更改分页颜色？

我尝试通过引导示例更改它，但失败了。

Vuejs，具有可编辑字段和双向数据绑定的动态b表

我正在尝试生成具有可编辑字段和双向数据绑定的动态b表。我希望没有任何硬编码值。现在，我有： ...

bootstrap-vue中用于在不同行上输入标签的布局

使用引导程序，当我需要根据设备更改标签/输入的布局时，使用下一个代码： ...

Bootstrap-Vue：如何获取动态表头？

当前正在使用Bootstrap-vue。我需要生成b表，但要使用从api获取的动态标头值，而不知道如何执行此操作。我尝试了常规方法来设置...

如何向Bootstrap Vue表中动态添加列

我正在使用Bootstrap Vue，并希望动态添加一列，或者仅在满足某些条件的情况下才显示该列。我正在尝试了解范围内的插槽以及这是否是...

如何显示src子目录中的bootstrap-vue b-card-img中的图像

在我的vue / cli 4 / vuex / bootstrap-vue项目/ vue-router项目中，我使用https://bootstrap-vue.js.org/docs/components/card/#comp-ref-b- card-img，我对img-src / src有问题，...