1,637 questions
1
vote
1
answer
43
views
Render extra item in VueJS v-for
I have standard v-for like so (using BootstrapVue):
<b-col v-for="(card, index) in cards"
:key="index"
cols="4">
<b-button> Click Me! &...
- 321
0
votes
0
answers
45
views
'./dist/bootstrap-vue-next.mjs?' does not provide an export named 'BootstrapVueNext'
In my laravel application after i installing npm install bootstrap bootstrap-vue-next
and updating the vite.config.js :
import { BootstrapVueNext } from 'bootstrap-vue-next';
import 'bootstrap/dist/...
0
votes
1
answer
71
views
BootstrapVue b-table not displaying received items when using pagination
I'm using the b-table from BootstrapVue with pagination. However, whenever I change pages, the items received from my REST API do not display, even though they are present. I have added a watcher to ...
2
votes
0
answers
54
views
Bootstrap 5 Dropdown Arrow displays incorrectly when the page is refreshed or accessed for the first time
I have a Bootstrap 5 dropdown menu using Vue.js and Nuxt.js :
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul ...
- 21
0
votes
0
answers
27
views
B Popover in bootstrap get closed when clicked element inside it when trigger is set with and click blur
Good day developers ..im using a component with b-popover component form vuebootstrap.
Inside that b-popover i have collapsable component that is also from vue bootstrap(b-collapse).
The intention is ...
- 1,295
0
votes
1
answer
98
views
How to escape conflicts of CSS between two UI Frameworks in Vue3?
We decided to move from one UI framework to another (from early BootstrapVueNext 0.7.3 to PrmeVue v3 or v4) and have style conflicts. The Doprdown component style or the Button component style is ...
1
vote
1
answer
52
views
Button behavior condition
I have a Submit button that once pressed run onSubmit function.
<b-form @submit.stop.prevent="handleSubmit(onSubmit)">
...
<b-button
type="submit"
>...
- 61
0
votes
0
answers
71
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
1
vote
1
answer
136
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
201
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
293
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,397
3
votes
1
answer
2k
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. ...
- 1,008
0
votes
1
answer
23
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,760
0
votes
1
answer
17
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
343
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
1
vote
0
answers
102
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'...
1
vote
2
answers
287
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>
...
- 5,307
1
vote
1
answer
168
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 ...
- 171
-2
votes
1
answer
129
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([...
- 565
2
votes
1
answer
154
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
1
answer
33
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
130
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,524
0
votes
1
answer
32
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 ...
- 27
0
votes
1
answer
161
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
164
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
161
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 ...
- 21k
-1
votes
1
answer
129
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
1
answer
55
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,365
0
votes
1
answer
223
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-...
- 45
4
votes
1
answer
3k
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
1k
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 ...
- 119
0
votes
1
answer
215
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
101
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
2
votes
0
answers
534
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 ...
- 141
0
votes
2
answers
143
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
732
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..."...
- 867
0
votes
0
answers
44
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
71
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="...
- 85
0
votes
1
answer
396
views
How to align image to the right using Bootstrap Vue
I am new to Bootstrap vue and attempting to align an image to the right using b-card header. I'm trying to use with span or . The template header is perfect in size until I add the image and the ...
- 169
0
votes
1
answer
376
views
How can I implement searching with vuejs and bootstrap-vue's form-input and form-checkbox components?
I have a code here:
<b-form-input v-model="search" placeholder="Search"></b-form-input>
<b-form-checkbox-group v-model="selected" :options="options&...
0
votes
1
answer
83
views
How to close previous row after clicked view details of new row
This is the example I get from Bootstrap Vue. After I click the "Show Details" button, it will show the row detail, but I want it to close the previous rows upon clicking it and only open ...
- 23
1
vote
2
answers
110
views
Bootstrap-vue pagination is removing items from array
I'm trying to use Bootstrap-vue pagination component but it's not working. I went to the documentation and just tried to use their example:
<template>
<div class="overflow-auto"&...
- 623
0
votes
1
answer
128
views
How to set main.js file to add Bootstrap-vue to the Vuex project?
I started a project with vue/vuex and trying to add Bootstrap-vue to it.
How to organize main.js file merging two fragments -
import { createApp } from 'vue'
import App from './App.vue'
import ...
user21728832
-1
votes
1
answer
493
views
I am getting this error when i try to use bootstrap-vue in vuejs application, How to resolve this
This is the main.js file
import { createApp } from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/...
- 21
0
votes
1
answer
389
views
Conflicting peer dependency - bootstrap and bootstrap-vue installation
Get problems when initiating a new vue bootstrap project.
This is what i do, and the errors i get, any good ideas?
Chat-GPT could not help me, so now i have to rely on you :-)
vue create my-project
...
0
votes
0
answers
131
views
why is Vuejs divided the page into two sided vertically?
im fetching a data successfully into the page using Vuejs, Pug, Axios, Pinia and bootstrap
but i dont understand why is the page divided into two sides vertically like this
i had inspected the page ...
- 671
0
votes
1
answer
139
views
Bootstrap vue form does not show up in browser
I have a bootstrap-vue code with a form. The form doesnt show up in the browser.
My Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
...
- 119
0
votes
1
answer
56
views
Is it possible to make a bootstrap vue prop dynamic?
I'm trying to create multiple accordions, based on the number of elements received, using bootstrap vue components.
I've created an accordion, similar to how the docs suggest: https://bootstrap-vue....
- 111
1
vote
1
answer
326
views
in BootstrapVue table, can only drag and drop table header, the table items are not changing
I want to implement a drag and drop feature on my BootstrapVue table. By using the code below, I can only drag and drop the table header but table items are not changing. I console logged ...
- 13
1
vote
1
answer
687
views
How can I activate b-tab on condition?
I am new in VUE3. I have an SVG image with some parts, data variable which is changing when click on particular part of the image and b-tabs. Is it possible to open specific tab depending on what is ...
- 25