bootstrap-vue

问题 In my Laravel+Vue.js SPA ( Single Page Application) I am using the datepicker package from here, BootstrapVue from here and Veevalidate from here . I think I need to show only the code inside my component file as only the datepicker component causes the problem and not other ones. My code follows in EditProfile.vue : <ValidationObserver ref="form" v-slot="{ passes }"> <div id="registration_form"> <b-form @submit.prevent="passes(onSubmit)" @reset="resetForm"> <ValidationProvider vid="name"

问题 I am building a Laravel+Vue.js SPA (Single Page Application) with BootstrapVue, VeeValidate and axios as the HTTP client. Inside axios, when I use multipart/form-data; boundary=${uploadForm._boundary} as the Content-Type in headers then all the validations in Laravel Controller method fail . But if I use 'content-type': 'multipart/form-data' in header then validation works except the file input field. The file field becomes empty in Laravel controller method. This happens within the component

问题 I have an array of objects (users) gotten by an api request. Its structure is something like this: api response: (5) [{…}, {…}, {…}, {…}, {…}] Inside this array, the objects are like this: 0: { user_address_string: ('Street 1') id: (3) avatar: (img') ... user: { id: 1 first_name: 'Lucas' last_name: 'Smith' } }, 1: {...}, 2: {...}, .... ] It is just a sample just to show you the structure. As you can see, among its properties there's another object named user{} . I need to display only the

问题 i've been struggling for almost 6 hours with this, but i didn't find a way to accomplish what i need. the thing is that i need to filter the table of bootstrap vue with a function, but i can't make it work, there is a step that i need, but i can't find it. here it is a jsfiddle that i grab from the web, that has the simple b-table with property filter. https://jsfiddle.net/rothariger/oxbrhcqk/1/ now if you check on this example I've replaced the property for a function, but, it just get

问题 I'm pretty sure I just don't understand how to implement Vue's Event Modifiers. According to that documentation, all I have to do is add this: <!-- the click event's propagation will be stopped --> <a v-on:click.stop="doThis"></a> Here's how I interpreted the example into my pug code: b-dropdown(text="Actions") b-dropdown-item b-form(inline) .row .col b-input(@click.stop='' placeholder="#123") b-button(:href='printCheck' variant="primary") Print Check It looks pretty simple, however it's not

问题 I have a table generated with bootstrap-vue that shows the results of a system search. The Results Table shows the records to the user, and the user can sort them and filter them. How can I add the search field underneath the table header <th> generated with the bootstrap-vue <b-table> element? Screenshot of the current table : Mockup of the wanted table : 回答1: You can use the top-row slot to customise your own first-row. See below for a bare-bones example. new Vue({ el: '#app', data: {

问题 I'm having something like this from the Docs in bootstrap-vue : Card with tabs: So how do I manage to design the tabs like this: My current code: <b-card no-body> <b-tabs card> <b-tab title="Tab 1" active> Tab Contents 1 </b-tab> <b-tab title="Tab 2"> Tab Contents 2 </b-tab> </b-tabs> </b-card> 回答1: You could add the following simple CSS rules and add full-width class to b-card : <b-card no-body class="full-width" > ... .full-width .card-header-tabs { margin-right: -21px; margin-left: -21px;

问题 This seems to remain unanswered so here is another attempt at a solution. Currently in bootstrap-vue, I am rendering a b-table . I would like to improve this by having the ability to select a row and collapse/expand an extra div/row/etc to show further information. In the below snippet you will see what I am trying. The problem is that I can't seem to get the expanded data to span the number of columns in the table. I have tried adding <tr><td colspan="6"></td></tr> but it doesn't seem to

问题 I have created a form and I'm trying to understand how to use v-model with nested properties in Vue.js This is the code for my template, as you can see I'm trying to reference the nested properties like so: form.dobDate , but how do I reference the properties ( dobDate , dobMonth and dobYear ) in mounted and watch ? So that whatever I type remains there on page refresh? <template> <div> <b-form novalidate> <b-form-select name="dobDate" id="dobDate" v-model="form.dobDate" :options="optionsDays

问题 I'm having an issue getting the checkboxes to work correctly. The checkboxes that are being rendered for each row in the "selected" slot are not binding to the correct row. When you click the checkbox, it sets the top rows' checkbox to true/false position. Questions: 1) How to bind the true/false state of the checkbox for the row to it's row item? I'm trying to bind it to data.item.selected and then loop through the data to find the "selected" objects and perform the necessary action. I even