Questions tagged [bootstrap-vue]
Provides implementation of Bootstrap v4.3 components and grid system for Vue.js 2.6+
bootstrap-vue
1,650
questions
0
votes
0
answers
47
views
Dropdown menu overlaps with component in Vue app
I had a Vue electron app, in which Home view component has 3 child components which are in single column one after the other, I have a b-dropdown in middle component when I scroll up the opened ...
- 19
0
votes
0
answers
9
views
Render Dynamic Dependant DropDowns with VUEJS 2.6.11 and BootstrapVue
I have an application written in VueJS 2.6.11 and BootStrap Vue 2.1.0
What I am trying to do is mimic the following functionality and can't seem to wrap my head around it. I know how to do it in ...
- 9,425
0
votes
0
answers
43
views
form validation before showing confirm modals
Description
I'm currently working on a Vue.js project using BootstrapVue to create a form. Imagine a button that performs two actions:
Validation Check using Vuelidate: It checks if the form has any ...
- 143
1
vote
1
answer
60
views
Vuejs 2 Multilevel Dropdown
update;
<template>
<div class="container">
<div class="dropdown">
<button class="btn btn-default" @click="toggleDropdown"&...
- 21
1
vote
1
answer
45
views
BootstrapVue Popover: Strange reactivity behaviour
I have a Vue tempate code similar to this one:
<b-button id="button" @click="editingComment=true">
Click me
</b-button>
<b-popover target="button">
...
- 41
0
votes
1
answer
65
views
Bootstrap 5 tabs not changing based on tab click in vue 3 project
I am trying to build a vue3 app with bootstrap 5. I am adding tabs. I am able to click on the tabs, but the tab-content is stuck on the initial tab. How do I fix that?
package.json:
{
"name&...
- 1,333
3
votes
1
answer
135
views
How to use Bootstrap 5 with VueJS 3
I am currently learning Vue.js and have some experience with Bootstrap. When I saw you can use Bootstrap with Vue.js, I thought I would try it out. My code is rather simple, a dropdown and a popover. ...
- 906
0
votes
1
answer
13
views
Make Table inside B-Col the size of the column. (Vue-Bootstrap)
I have this in my Vue component
<b-modal ...>
<b-row>
<b-col sm="12">
<table >
<tr v-for=... :key="key">
<td><...
- 8,610
0
votes
1
answer
12
views
Get the context (sorted value) of a b-table
I would like to get the information of the context of my b-table.
The table is called like that from my component :
<b-table
...
:sticky-header="true"
:responsive="true"
...
- 21
0
votes
0
answers
68
views
Cannot read properties of undefined (reading 'hook')
I have project, build with nuxt v2, but now i upgrade it to v3, but when i want to yarn build, build crashed.
My code
// --- Main Nuxt.js module ---
module.exports = function nuxtBootstrapVue(...
- 23
0
votes
0
answers
36
views
Issue closing bootstrap vue modal in metronic template
I'm currently working on a Vue.js project where I have a modal for adding organizations. The modal is part of a larger application built with the Metronic Vue template. I'm using the Composition API ...
1
vote
0
answers
48
views
Why aren't some components running in vue bootstrap?
In vue bootstrap, b-table, b-form-input, etc. are normally compile. However, dynamic elements such as tooltip, sidebar, and carousel are not running.
This is my main.js:
import { createApp } from 'vue'...
0
votes
0
answers
35
views
How can I show and hide a template referring to the current row?
I use Bootstrap Vue table, and I'm trying to show/hide the row item by clicking on a method toggleInnerTable(). This method changes the state of expandedInnerTable[row.item.id] object to true/false. ...
- 127
0
votes
1
answer
36
views
How to only select one value in an option that contains two variables?
I have a list containing a set of properties, and each of these both have a number and a name. I have made it so both are visible in my form options
<b-col md="3">
<b-form-...
- 89
0
votes
0
answers
34
views
Bootstrap Vue nested tables issue with row IDs
after a long research and tries to handle this issue myself, I'm here to ask for a help.
I use Bootstrap Vue to create a child component , in the parent component I use for 2 main tables, each main ...
- 127
0
votes
0
answers
38
views
Vee-validate not updating the BootstrapVue Switch Checkbox state
I'm using vee-validate on a BootstrapVue Switch Checkbox with yup schema like this.
<Form :validation-schema="schema" :initial-values="initialValues" ref="adminForm"&...
1
vote
2
answers
159
views
How to pin the top header row showing column names in this bootstrap-vue table?
I have a bootstrap-vue table that looks like this;
Here is the code;
<template>
<div>
<b-table hover :items="items"></b-table>
</div>
</template>
...
- 4,407
1
vote
1
answer
106
views
How to populate text are on click using vue apex charts dataPointIndex
I'm attempting populate a text area onclick from Apex chart. In the below code pen you can click on the bar and it generates an alert with the value from the chart. I would like to get that value ...
- 135
0
votes
0
answers
16
views
Laravel Vue: Error in v-on handler: "TypeError: Right-hand side of 'instanceof' is not callable"
Im implementing the bootstrap-vue tab in the application but when I copied one of the example im getting some error "Error in v-on handler: "TypeError: Right-hand side of 'instanceof' is not ...
- 983
-2
votes
1
answer
73
views
How do I make JS fetch function receive json/data from flask API in the same order as sent by flask?
How do I make JS fetch receive json/data from flask API in the same order as sent by flask?
flask API:
@api_bp.route("/users")
def users():
all_users = User.query.all()
data = list([...
- 555
0
votes
0
answers
11
views
Mobile devies Cannot open tooltip again when call this.$root.$emit("bv::hide::tooltip")
Describe the bug
I implemented b-tooltip on my website, but I am encountering issues with it on mobile devices. Specifically, after adding an event that triggers this.$root.$emit("bv::hide::...
- 1
2
votes
1
answer
91
views
Vue ref change does not apply changes to the component after update
I have a form implemented with vue3. The form consists of three text inputs and a checkbox group.
I am using bootstrap-vue form and it's checkbox-group for this.
I call an api to set default values on ...
- 217
0
votes
0
answers
111
views
How to prevent Vuetify from overriding Bootstrap Vue styles in a mixed Vue.js project?
I am working on a Vue.js 2.x project that primarily uses Bootstrap Vue for the UI components. Due to certain limitations in Bootstrap Vue's tables, I decided to integrate Vuetify data tables for their ...
- 79
0
votes
0
answers
229
views
How to update Apex Chart data via dropdown selection
I'm trying to grasp an understanding of how to change data in Apex Chart from a dropdown selection in Bootstrap vue.
This code pen link shows that the bar chart works fine with a simple dataset of ...
- 147
0
votes
1
answer
23
views
overriding class styles from bootstrap,according to the HTML rendered in Devtools
Im trying to override some styles from my app using bootstrap. When I access the Chrome Devtools, the HTML rendered is:
<div data-v-256a5f3d="" data-v-7bf4ea52="" class="...
- 1,295
0
votes
1
answer
63
views
Missing transitions with sidebar component in bootstrap-vue
I'm using the b-sidebar component of the bootstrap-vue library in my vue 2 app:
"dependencies": {
"vue": "^2.7.7",
"bootstrap": "^4.6.1",
...
- 6,404
0
votes
0
answers
111
views
Is there any way to use bootstrapVue 2 components in nuxt 3?
I want to migrate from Nuxt 2 to Nuxt 3 and the project has bootstrapVue dependency.
we know that there is no bootstrapVue version 3 available yet.
so i tried this link but
it is simply not working!
...
0
votes
1
answer
27
views
Is there a way to set the deafault value of a bootstrap checkbox group to true?
I have a checkbox group that contains 21 checkboxes that are bound to an array.
Currently they are all unchecked by default, but I would like them all to be checked.
Looking at the documentation, it ...
- 25
0
votes
1
answer
147
views
What is the best way to calculate the height of element
I use Bootstrap Vue table with Vue v2 and I currently use a prop (sticky-header="600px") to set the table height:
<page-wrapper>
<page-header> </page-header>
<div ...
- 127
0
votes
0
answers
99
views
Bootstrap Vue form radio buttons - how to change radio buttons width
I use Bootstrap-vue and I have a group of 2 radio buttons (b-form-radio-group) I'm trying to set each radio button to 50% width. I created the following code structure:
<b-row>
...
- 127
0
votes
2
answers
97
views
VueJS Bootstrap <date-picker> is hidden in <b-table> row
I'm using VueJS (v2.6.10) and boostrap-vue (v2.0) and trying to allow users to enter a datetime for a record in a <b-table> using the using vue-bootstrap-datetimepicker (v5.0.1).
The issue is ...
- 20.9k
-1
votes
1
answer
81
views
Can I use Bootstrap 5 with Vue v2 and Bootstrap-vue Components?
The project that I work on is created with Nuxt v2 (Vue v2, Bootstrap v4, Bootstrap-vue). The project uses bootstrap-vue components like:
<b-navbar toggleable="md" type="dark" ...
- 127
0
votes
0
answers
18
views
b-form-checkbox in list group doesn't work
I added a check box into the list group, the list group contain 2 item, the first row of check box is work but the second one doesn't work when I click the check box, the different is item 2 contains '...
- 461
0
votes
1
answer
46
views
Vue Js data is not updated inside computed generated elements
I have used a bootstrap table in my projects. The fields are populated at computed such as
<b-table :items="items" :fields="tableFields">...</b-table>
computed: {
...
- 3,297
0
votes
0
answers
95
views
Google Map Initialize Script with Vue
My project have a main.ts for initialize bootstrap and vue app, I also have many .vue file, some .vue files will use google map.
I have a problem that the following script is google suggested for ...
- 461
0
votes
1
answer
132
views
Vue b-modal @close look like it doesn't work
The following is my b-modal code:
<b-modal
centered
id="modal-center"
title="product regist"
body-class="p-0 m-0"
size="col-md-6 col-sm-6"
ok-...
- 3
0
votes
0
answers
66
views
how do i separate custom cells b-table in bootstrap vue
The B-chart is in a component for me. I write a template for each cell individually.
Every time I call the component, I want to have only the template cells that contain the requirements of the ...
- 23
4
votes
1
answer
2k
views
bootstrap 5 import error on vue and vite project
this is the error i am getting on my terminal
Deprecation Warning: Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be ...
- 105
0
votes
2
answers
591
views
using bootstrap-vue in vuejs3 project doesnt compile successfully
I am doing a vue3 application which uses bootstrap-vue. I created a vuejs3 project with vue create and later installed boostrap-vue with npm install bootstrap-vue@latest . I created my App.vue from a ...
- 89
0
votes
0
answers
30
views
How does the bootstrap-vue scoped-slot syntax for b-tables work behind the scenes?
When looking at the documentation I see you can insert dynamic content into the table using scoped slots and having access to the parent data. The pattern to archieve this is: v-slot:cell(Delete)=&...
0
votes
0
answers
89
views
How do you handle a multi-color header in Bootstrap cards?
I am using Bootstrap Cards, and I have made a header which uses linear-gradient styling for the background. The idea is that one piece of information goes into the red section of the header, in this ...
- 89
0
votes
1
answer
148
views
Vue.js Bootstrap table - pass data between Parent and Child component
I have 2 components: Parent and Child. In both components, I'm using Bootstrap tables and their 'items' and 'fields' come from API. The Child component should pass data (true or false, for each table ...
- 127
0
votes
1
answer
78
views
Vue.js Bootstrap table - How to extract IDs of table rows and collect them in a data property
I'm using Vue.js Bootstrap table and I would like to be able to collect each table row id in an Array or Object data property.
Here is an example of a bootstrap table template:
<template v-...
- 127
0
votes
0
answers
140
views
How to print paper in landscape mode by using vue-html-to-paper?
I have a problem to print in landscape by using vue-html-to-paper.
https://www.npmjs.com/package/vue-html-to-paper
Can someone show me the correct way?
Below are my folder and code:-
plugins/main.js
...
2
votes
1
answer
428
views
Bootstrap-vue table with column span 2 by using items and fields
I am doing a project with using vuejs2 and bootstrap vue. I was asked to do the ui like this (just an idea of the ui):
Explanation of the part I stuck, I want to achieve a ui that have a header with ...
- 131
0
votes
2
answers
112
views
Vue.js Bootstrap table - how to restrict number of rows
How to show only 1st row from a Bootstrap table and via checkbox to show the rest of the rows? The bootstrap table and checkbox are in different components.
<b-table hover small responsive bordered ...
- 127
1
vote
1
answer
424
views
Vuejs: How to edit name and insert icon in b-form-file
I'm doing vuejs frontend. And now I'm getting to the file uploading part. I use <b-form-file> :
<b-form-group>
<b-form-file
placeholder="Choose a file or drop it here..."...
- 777
0
votes
0
answers
34
views
Bootstap Vue.js: best practice for supplementing link text with the title attribute for <b-nav-item>
I'm using Bootstrap Vue.js to implement navigation and I'm wondering what is the best practice to set an anchor title for <b-nav-item>. I would like to do this in order to cover one of the WCAG ...
- 127
0
votes
1
answer
40
views
Bootstrap Vue: v-model is acting weird
I have encountered some issues what I don't understand. Can someone explain to me what I'm doing wrong?
I have a b-form-input and the variable "barcodeText".
<b-form-input id="...
- 55
0
votes
0
answers
610
views
Error while using bootstrap-vue in project
As soon as I installed and used Bootstrap-vue in my project this error started coming and I am not able to resolve it
Details of the error
Cannot read properties of undefined (reading 'version') ...
- 1