bootstrap-vue | 易学教程

Cannot render images dynamically to carousel Vuejs

阅读更多关于 Cannot render images dynamically to carousel Vuejs

问题 I've set up a carousel using bootstrap-vue. I used a for loop and an array of objects to dynamically create the component. In each of the slide, I will include a text as well as a background image. I was able to render the texts dynamically. However, the background image only appeared at the first slide. For subsequent slides, the image will not be rendered anymore. What seems to be the problem? Below are my codes and a screenshot of the result Update: I am still not able to get this to work.

Bootstrap Vue Carousel height does not fit to full screen

阅读更多关于 Bootstrap Vue Carousel height does not fit to full screen

问题 I am using Bootstrap Vue to create my carousel. The carousel contains 3 images that allow users to cycle through. I am able to display the images that fit the height and width of my laptop screen size. However, as I slowly reduce the screen size to mobile, the height does not feet the screen anymore. Below are my codes and screenshots Update: I still cannot solve this issue, can anyone here me? <template> <div> <b-carousel id="carousel-1" v-model="slide" :interval="4000" controls indicators

Vue.JS 2.5.1 : Uncaught SyntaxError: Unexpected token export

阅读更多关于 Vue.JS 2.5.1 : Uncaught SyntaxError: Unexpected token export

问题 I was trying to make a radio button using VueJS and Bootstrap Vue, but this happens when I make it. I'm expecting this to be syntax error just like what it said, but I can't seem find any clue. So I tried to copy pasted the code, here's the full code of test_radio.php <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"

Vue Js How to calculate the value on the table and display the sum on the footer

阅读更多关于 Vue Js How to calculate the value on the table and display the sum on the footer

问题 I wanted to create simple invoice using bootstrap table and Vue Js. Basically, What i wanted is shown in the image below: I have tried as in the code below, but i am confused on two things, How should i 1) Calculate the total cost and show that as the footer summary . 2) Multiply rate and qnty and display on the corresponding input box on cost . new Vue({ el: '#app', methods: { addService() { this.model.services.push({}); } }, data: { model: { services: [] }, fields: [{ key: "rate", label:

VueJS - Validate file size requirement in form file upload

阅读更多关于 VueJS - Validate file size requirement in form file upload

问题 I am using a Bootstrap Vue form to make a simple form where user can upload a file. Is there a way to validate the size of files selected using Vue form ? I want to prevent user from uploading such files. I have seen this solution but looks like it includes some third party plugin. I prefer a solution which doesn't 回答1: Here's a generic Vue example of how to validate the file's size before the form is submitted. The crux is obtaining the file object from the files property on the input itself

Console warnings for non-passive scroll event handlers

阅读更多关于 Console warnings for non-passive scroll event handlers

问题 I'm getting this console error when I use Form Select from bootstrap-vue. I'm using google chrome. [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. I'm getting this data from a api, using axios. See the code below. <b-form-select v-model="selected" class="mb-3"> <option :value="null">Select a group</option> <option v-for="group in groupItem" :value="group.id"> {{group.name}} <

Get row element form row.clicked event

阅读更多关于 Get row element form row.clicked event

问题 I'm using Table from Bootstrap Vue, and I'm trying to display row details when clicking on a row. I used row-clicked event as the doc said, but I don't find any row details with a toggleDetails method. So I don't even know how to open it and where toggleDetails come from. There is a way to open this details row with row.clicked event ? Or should I use another method to do this ? Do you have some clues ? EDIT There is some code to illustrate a bit more my problem, there is my table with the

Bootstrap-vue doesn't load CSS

阅读更多关于 Bootstrap-vue doesn't load CSS

问题 I am writing a Vue.js app with Bootstrap 4 and I can't loaded though I followed the documentation. Added to main.js Vue.use(BootstrapVue); Added to css file related to App.vue: @import '../../node_modules/bootstrap/dist/css/bootstrap.css'; @import '../../node_modules/bootstrap-vue/dist/bootstrap-vue.css'; Here is template: <div class="main"> <div> <b-modal id="modal1" title="Something went wrong" v-if="!serverStatusOk"> <p class="my-4">{{msg}}</p> <p class="my-4">{{statusCode}}</p> </b-modal>