bootstrap-vue

问题 Trying to get Bootstrap Vue to play with a REST api that returns data for one page and the total number of records (based on this): <template> </div> <b-pagination v-on:change="onPageChange" :total-rows="totalRows" :per-page="perPage" v-model="currentPage" /> <b-table responsive striped hover show-empty stacked="md" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" :filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection"

问题 I have written the following code: <div> <div id="app" class="container"> <div class="grid"> <article v-for="tool in tools"> <div class="title"> <h3>{{capitalizeFirstLetter(tool.name)}}</h3> </div> <div class="description"> {{tool.description}} </div> <br> <div> <toggle-button :value=tool.status color="#82C7EB" :width=100 :height=30 :sync="true" :labels="{checked: 'Following', unchecked: 'Unfollowing'}" @change="onChange(tool)"/> </div> </article> </div> </div> </div> Recently I started using

问题 I am using Bootstrap-Vue and VueJs and need help with some custom data rendering from multiple data objects and displaying the data into a table. Specifically, I am following this part of the Bootstrap-Vue TABLE docs: https://bootstrap-vue.js.org/docs/components/table#formatter-callback but I am unsure how to apply it to my code. Here's my scenario: I have a data API providing 2 different arrays of objects: posts and names Posts: [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat

问题 Is it possible to use Laravel pagination with Bootstrap-vue pagination ? I'm trying this: <b-pagination-nav :link-gen="linkGen"></b-pagination-nav> Default method of Bootstrap-vue: linkGen (pageNum) { return `${pageNum}` } But it doesn't seem possible to set first / prev / next / last pages links that Laravel sends me: current_page: (...) data: (...) first_page_url: (...) from: (...) last_page: (...) last_page_url: (...) next_page_url: (...) path: (...) per_page: (...) prev_page_url: (...) to

问题 I'm trying to migrate my project from vue-strap to bootstrap-vue. I have trouble to migrate panel. The current vue-strap code: <div class="col-sm-3"> <panel is-open type="info"> <table slot="header"><th>Search:</th></table> <search-form :fieldList="fieldList" :customs-max-num="customsMaxNum" :data-types="dataTypes" /> </panel> </div> The search-form is my component. As I understand, I need to use the collapse of bootstrap-vue (without actually collapsing), as shown in the docs. But it looks

问题 The code looks as following: <template> <div> <b-carousel id="carousel-upper" v-model="slide" :interval="3000" fade controls indicators @sliding-start="onSlideStart" @sliding-end="onSlideEnd" > <b-carousel-slide img-src="https://licota.ru/system/sliders/attachments/55ba/10cf/7372/763c/8600/0002/full/banner-2.jpg?1438257358" ></b-carousel-slide> <b-carousel-slide img-src="https://licota.ru/system/sliders/attachments/55ba/10cf/7372/763c/8600/0003/full/banner-3.jpg?1438257359" ></b-carousel

问题 I know its not advised to pass function as a prop to the child component in Vue. But if I were to do it, how is that possible? This is what I have tried till now - My child component - <template> <b-card :style="{'overflow-y': 'scroll', 'border-top': '0px', 'height': 'calc(100% - 53px)', 'border-top-left-radius': '0px', 'border-top-right-radius': '0px'}"> <div class="img-magnifier-container" :style="{'position': 'relative'}"> <b-img :id="('og' + curr_doc_num) + index_page" :src="pageImages

问题 I know its not advised to pass function as a prop to the child component in Vue. But if I were to do it, how is that possible? This is what I have tried till now - My child component - <template> <b-card :style="{'overflow-y': 'scroll', 'border-top': '0px', 'height': 'calc(100% - 53px)', 'border-top-left-radius': '0px', 'border-top-right-radius': '0px'}"> <div class="img-magnifier-container" :style="{'position': 'relative'}"> <b-img :id="('og' + curr_doc_num) + index_page" :src="pageImages

问题 So I have some code that has a b-form-input component and I am testing whether that component renders. I am using wrapper.find({name: "b-form-input"}).exists() to determine whether that bootstrap vue component exists. However this function continually returns false when I know that the component is rendering. Could I have some help on how to do this correctly? 回答1: Looking at the bootstrap-vue source code, it looks like the name of the element is BFormInput and not b-form-input (it was

问题 If I put this code into the Template portion of the playground at https://bootstrap-vue.js.org/play, I cannot get my 'A Number Here (1)' text to be red. Is there any way to color the text of one b-nav-item so it isn't the same as the others? <b-navbar toggleable="md" type="dark" variant="dark"> <b-navbar-toggle target="nav_collapse"></b-navbar-toggle> <b-collapse is-nav id="nav_collapse"> <b-navbar-nav> <b-nav-item href="#">Nav Item 1</b-nav-item> <b-nav-item href="#">Nav Item 2</b-nav-item>