Questions tagged [bootstrap-vue]

I have a form without any input and my goal is to automatically set the "responsible clerk" field to the currently logged-in user when the component mounts. Here's what I have: <b-form-select v-model="form.responsible_clerk" :options ...

Attempting to import an image asset using a relative path for a banner component has presented some challenges. The standard method seems to work without any issues. <b-img src="~/static/images/carousel1.jpg" alt="Samyojya Consultants ban ...

While we have a NuGet package available for Vue 2.5 to easily set things up in an ASP.net project in Visual Studio 2017, unfortunately, there is currently no Bootstrap-vue NuGet package. The Bootstrap-vue website provides instructions only for NPM and YAR ...

I'm currently working on a chrome extension and utilizing Bootstrap-Vue in my Vue files. I have imported bootstrap/bootstrap-vue into my js file, but the styling is being applied globally. Is there a way to scope the Bootstrap only onto specific inser ...

Can someone please assist me with this error message? It says "app.js:108639 [Vue warn]: Cannot set reactive property on undefined, null, or primitive value." I encountered this error while working with a Bootstrap Vue modal. Here is a snippet of my code: ...

Is there a way to replace whitespaces with underscores in the file name input of bootstrap-vue without changing the cursor position? If I add a white space not at the end of the input, the formatter moves the cursor to the end. How can I achieve this? I a ...

Currently, I am experimenting with BootstrapVue and attempting to dynamically generate components after the site has been rendered. The goal is to utilize asynchronous data for the generation process at a later stage using Vue, and then adding them to the ...

Is there a way to prevent the Toast from closing when the Modal is closed in BootstrapVue? Here's the scenario: Open both the Modal and Toast on the page Close the Modal Notice that both the Modal and Toast close simultaneously Question: How can ...

In my Vue project with bootstrap-vue, I am utilizing the b-collapse feature within a v-for loop for lists. While it is functioning correctly, I am struggling to automatically close expanded list elements when a new one is clicked. Here is my question: Ho ...

So, I've implemented a validation function triggered on blur from an input box. The method takes the ID and limits to be validated against as parameters. I'm utilizing Bootstrap Vue for the popover where the validation errors are shown. However, ...

Is there a way to collapse accordions individually that are created inside a Vue.js v-for loop? I believe assigning a dynamic id to each accordion will help with this, but I am not sure where to add this id. Below is my HTML code: <div role="tablist"& ...

Maybe I'm overcomplicating things, but here's the issue I'm facing: When I publish my project (my-navigation) to the npm registry and then npm install it in another project (my-vue-app), everything works perfectly. However, if I try to npm install my-nav ...

Utilizing the bootstrap-vue framework for my modal, I encountered an issue. Upon clicking the button labeled OPEN MODAL, the modal opens with footer buttons OK and CANCEL, which work as expected to close the modal as per bootstrap-vue's default behavior. ...

I'm trying to center my navbar component, but I can't seem to figure it out. This is my first time attempting this and everything else looks good except for this issue. <template> <div class="container"> <header> &l ...

How can I adjust the width of the th to expand the rows of the table like in the screenshot? Is there a way to add a class to th? View what I want here logTableField: [ { key: "LogDate", label: "Tarih",thClass: 'bg-white text-dar ...

Transitioning my project from vue-strap to bootstrap-vue has hit a snag for me. I'm having difficulty migrating the panel. Here's the current vue-strap code snippet: <div class="col-sm-3"> <panel is-open type="info"> < ...

Would appreciate any guidance on my use of Bootstrap vue table with contentful's API. I'm currently working on implementing a for loop to iterate through an array and retrieve the property values. Although the console.info(episodes); call successfully pr ...

I attempted to modify it using various bootstrap examples but was unsuccessful. <b-pagination v-model="currentPage" :total-rows="users.length" :per-page="perPage" align="fill" size=&ap ...

I am completely new to VueJS and I'm currently working on populating a table with various columns, one of which contains a button that triggers the opening of a modal. There are three different types of modals that can be opened based on certain conditions ...

I encountered an issue with the following code: <sepa-modal ref="sepaModal" /> <b-card id="show-btn" class="card-modal" @click="openSepaModal()" > </b-card> openSepaModal ...

I am attempting to bind v-model by passing the value inside the items array. However, the binding is not functioning correctly. The main objective here is to utilize a store since all these values are utilized across multiple "wizard" components. Whe ...

The goal is to format the 'from' and 'to' columns in a way that displays their description rather than their code in the table. <b-table id="my-table" hover striped small outlined :items="items" :fields="fields" class="mt-0 mb-0"> <template s ...

Currently, I am delving into Web Development using Vue. As part of my project, I have constructed a component that calculates the BMI (Body Mass Index) of an individual. To collect the necessary data, I have implemented a form utilizing bootstrap-vue. Howe ...

My goal is to design an alert box component with a customizable reveal transition, which can be optional. Here's a simplified version of what I have in mind: <template> <transition v-if="withTransition"> <b-alert v-bind="this.$a ...

Looking for help with implementing a photo preview in my code using BootstrapVue. The Vue devtools show that the form-file contains the image, but my 'watch' isn't functioning properly. Any assistance would be greatly appreciated! Here is my template: &l ...

In my current project, I am working on creating a conditional select-box feature. The idea is to have two select-boxes where the value of the second box automatically changes and becomes disabled when the value of the first box changes. While I have succe ...

My Vue script looks like this: export default { name: 'app', components: { }, data(){ return{ image: null, isLoaded: false, items: [] } }, created(){ this.divtest() this.getTimeTable() }, methods ...

My Vue Bootstrap Web-App (v2.21.2) is designed to utilize Toasts for displaying errors generated by the REST API client to users. When errors are caught in my components, a function is called that uses this.$bvToast.toast() to dynamically generate and dis ...

I'm working with the Vue-Bootstrap framework and I need to update the CSS rule for the 'option' tag when it is being hovered over. Here is my code snippet: jsfiddle option:hover { background-color: red; } Can someone please explain why ...

Currently, I am utilizing version "2.0.0-rc.11" of "bootstrap-vue", and I am facing an issue with the footer not displaying in the table. Despite referring to the documentation examples, I have been unsuccessful in resolving this problem. Here is My Code: ...

I'm attempting to utilize vee-validate to verify if the user is inputting a valid date in a bootstrap-vue date input field. Even after following the vee-validate documentation, it appears that the expected behavior is not being achieved. Validation d ...

I've been exploring the integration of Bootstrap-Vue library with my Nuxt.js project. Although I referred to the official documentation for guidance, I encountered an issue. While importing bt-vue as a single module was successful, I wanted to optimiz ...

My Vue application consists of multiple cards, each displaying a button when hovered over. Additionally, hovering over the button triggers a popover to appear. However, I am experiencing issues with the popover behavior - it blinks when attempting to acces ...

My Vue.js form includes two BootstrapVue datepickers for holiday management. Users can define the start date and end date of their holiday, with the condition that the end date must be equal to or greater than the start date. Here is my current implementat ...

Having an issue with my dynamic button element: <button v-on:click="changeRecord(element)" v-b-modal.modal-5>Aendern</button> This button is generated dynamically within a v-for loop. Instead of manually including the attribute name like v-b- ...

I'm facing an issue with creating editable rows on a bootstrap b-table and veevalidate. Is it possible to have multiple ValidationObservers and then validate them by calling a single method? <b-table :items="items"> <template v-slot:cell(fo ...

Here is an example of how my json data is structured. I have multiple elements being displayed in a v-for loop, and when one is clicked, I want to show specific information from that element in a modal. [{ "id": 1, "companyNa ...

I'm facing an issue with my code that allows me to add inputs using @click="addInput()". However, I am struggling to delete specific inputs using @click="deleteInput(). When I try to delete an input with this.inputs.splice(index, 1), on ...

I am facing an issue with multiple sticky columns in my layout. When these columns are set as sticky, they tend to visually stack over each other, sometimes causing the left-most sticky column to "peek" out from under the next one. Is there a way to add m ...

Can anyone help me with displaying a table of flowers? I am having trouble making it show up on my page. Not quite sure how to use my data to get the flowers to display properly. Any guidance or advice would be greatly appreciated. <b-table> ...

Encountering issues while trying to start a new Vue Bootstrap project. Here is my process and the errors I am facing, any suggestions? Unfortunately, Chat-GPT was not helpful, so now I'm turning to you for assistance :-) vue create my-project selections: ...

I'm facing an issue with triggering a sibling element. What I've tried so far <b-img @click="callFileLoader"/> <b-file type="file" ref="fileUploader"></b-file> ... methods:{ callFileLoader () { this.$refs.fileUploader.c ...

My bootstrap-vue vue.js v2.6 app is receiving JSON data from a REST API. The data structure looks like this: { "fields": [ { "key": "name", "label": "name", & ...

Currently, I am implementing v-b-popover on my website to handle both touch and mouse events. To achieve this, I have set the tag of v-b-popover as 'hover'. I am wondering if there is a way for me to toggle the popover (show and hide) for both touch and ...

I am facing an issue while trying to display data in a b-table. Normally, it works well with most data sets. However, when I encounter another array nested within the referenced array, the rendering is not done properly. While working on this problem, I ...

I need help passing a cell value to a function when clicking on the cell. While it's easy to do this with a regular table, I am trying to figure out how to achieve the same result with bootstrap-vue b-table. Here is the code snippet for the table: <b-t ...

Currently utilizing Bootstrap Vue and aiming to incorporate a formatter callback for injecting HTML into a table column. In the provided example from Bootstrap's documentation, the link is formatted as an anchor link: Ex. <b-table striped responsive ...

Currently, I am utilizing the bootstrap-vue modal in my project. I now have a requirement to implement validation when a user attempts to close the modal. Specifically, I need to display a confirmation message asking, "Are you sure you want to close withou ...

Can anyone assist me with enabling or disabling an input text field based on the values selected in a b-form-select element? Your help would be greatly appreciated. ...

In my application built with Vue, content is displayed based on the component type (Header, Text, Image) in a JSON file. I am looking to implement scroll spy functionality specifically for the Header component containing headings. I have attempted to use ...

I have a page layout with three columns: a fixed-width left-hand navigation, a responsive content column, and a fixed-width right-hand navigation. The issue arises when the content in the middle column includes HTML tables that sometimes exceed the availab ...

I am facing an issue where I have a child component with a <b-collapse> element, and I am trying to toggle its visibility from the parent component. While I have $bvModal for handling models, I couldn't find anything similar for collapses. Parent Co ...

I am looking to update the background color of a row within a table when a tr is clicked. Below is the code for the table: <div class="table-responsive"> <table class="table table-hover"> <thead> ...

Currently utilizing nuxt and bootstrap to construct a custom hover dropdown menu for navigation. Encountering an issue where my navigation submenu NuxtLinks are triggering a full page refresh instead of smoothly transitioning the app content within my Nuxt ...

My b-table is filled with data from an API hit through Swagger UI, and since there's a large amount of data, I need the search button at the center top of the page to work properly when inputting store code or branch. https://i.stack.imgur.com/l90Zx.p ...

This is the dropdown code I am currently using: <b-dropdown size="sm" text="Update" split class="m-2"> <b-dropdown-item-button>Action</b-dropdown-item-button> <b-dropdown-item-button>Another ...

Currently, I have the following code snippet within a table: <template v-slot:cell(checkbox)="row" style="border-left='5px dotted blue'"> <input type="checkbox" v-model="row.rowSelected" @input="toggleS ...

After analyzing with Webpack bundle analyzer, I discovered that the icons from the bootstrap-vue package are a whopping 535kb in size. Knowing this, I've decided not to utilize them in my project. I attempted to exclude the entire package using a web ...

Is there a way to retrieve the selected text or its position within a paragraph (<p>)? I'm displaying a text sentence by sentence using a Vue.js loop of paragraphs. <p class="mreadonly text-left mark-context" v-for="line in ...

I'm facing an issue with a form that has linked selects. When one select is filled, the other select should also be filled with the corresponding code. However, when opening the modal with the field value, it fails to load the value. I suspect this might b ...

I'm in the process of developing an application using VueJS paired with bootstrapVue for the front end and Django for the back end. I have integrated b-table and would like to incorporate pagination using b-pagination. Within my itemsProvider function, I ...

Utilizing bootstrap-vue to display data on a b-table, I have truncated long text and display the original when hovering over it using the title prop. It works well with custom CSS, but I would like to implement b-tooltip. <b-table hover sticky-hea ...

In order to confirm that our mistakes have been displayed in the bootstrap-vue toast messages, I need guidance on how to validate this during testing. My initial plan was to simulate 'this.$bvToast.toast', but so far I haven't found a suitab ...

When looking at the code snippet provided below, I'm trying to figure out the appropriate event/method to determine whether the value entered in the input field was manually typed or selected from the <datalist>. SAMPLE CODE: <div> <b-f ...