I am using bootstrap-vue modals in my small project and I can not figure out why my modal's layout is soo off.
Here is the screen
As you can see, it is not even possible to click on the input field.
Here is my code, nothing special:
<b-modal
id="insert-name"
title="Name"
>
<form ref="form">
<b-form-group
label="Name"
label-for="name-input"
>
<b-form-input
id="name-input"
v-model="name"
></b-form-input>
</b-form-group>
</form>
</b-modal>
I am using vue "2.6.12" and bootstrap-vue "2.21.2".
Related
I´m struggeling with passing properties into a slots component.
Here some code to explain my problem:
App template:
<template>
<ModalContainer v-model="visibleModal">
<create-dir-modal />
</ModalContainer>
</template>
ModalContainer:
<template>
<div class="modal-container" v-if="modelValue" #click.self="close">
<slot :close="close" />
</div>
</template>
(close is a defined method here)
CreateDirModal:
<template v-slot="slot">
<div class="create-dir-modal-container">
<i class="button" #click="slot.close">close</i>
<div>
<i>folder</i>
<input placeholder="Name" v-model="name" />
<span></span>
<i class="button">done</i>
</div>
</div>
</template>
I am trying to execute the close method from the ModalContainer in the CreateDirModal.
Here is my problem: slot is not defined in CreateDirModal template.
Am I just using it wrong or is there a way to fix my problem?
I want to display different data of each element in my table in vuejs
I have used props and I am able to display the data of the table created via the b-table tag. But I am unable to display data differently for each element inside the table. Some code might be easy for me to make you understand my problem
<div class="card-body" style="overflow-y:scroll;">
<loader v-if="loading" />
<b-table v-else
#row-selected="onRowClick"
bordered
responsive
stacked="md"
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
#filtered="onFiltered"
selectable
:select-mode="'single'">
<template v-slot:cell(show_details)="row">
<b-button size="sm" #click="row.toggleDetails" class="mr-2">
{{ row.detailsShowing ? 'Hide' : 'Show'}} Details
</b-button>
</template>
<template v-slot:row-details="row">
<b-card>
<b-row class="mb-2">
<b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
<b-col>{{items[0].companyIdentifier}}</b-col>
</b-row>
<b-row class="mb-2">
<b-col sm="3" class="text-sm-right"><b>Is Active:</b></b-col>
<b-col>active</b-col>
</b-row>
<b-button size="sm" #click="row.toggleDetails">Hide Details</b-button>
</b-card>
</template>
</b-table>
</div>
For the b-table I am displaying the data using the items field which is declared as a prop below and is coming from the parent. But below, I am unable to show the data inside the b-card.
I did it with the help of scoped slots in bootstrap vue table.
I think data inside b-card show be rendered with row.item.companyIdentifier.
instead. items[0].companyIdentifier will always be the same as first item.
<template v-slot:row-details="row">
<b-card>
<b-row class="mb-2">
<b-col sm="3" class="text-sm-right"><b>Age:</b></b-col>
<b-col>{{row.items.companyIdentifier}}</b-col>
</b-row>
<b-row class="mb-2">
<b-col sm="3" class="text-sm-right"><b>Is Active:</b></b-col>
<b-col>active</b-col>
</b-row>
<b-button size="sm" #click="row.toggleDetails">Hide Details</b-button>
</b-card>
</template>
I am trying to autofocus on the first radio button so that the user can automatically began cycling through answers with the tab and arrow keys on page load.
I am able to accomplish this with checkboxes but it does not work with virtually the same component but for a radio button.
Here's the component for the checkboxes.
<template>
<div class="col-12 form-group">
<h5 class="mb-4" v-html="question.text"></h5>
<img class="col-sm-6" :src="question.image" v-if="question.image">
<div v-for="(answer, index) in question.answers" :key="answer.value">
<label :class="`${name}${index}`">
<input autofocus="(index === 0) ? 'true' : 'false'" class="checkbox" type="checkbox" #keydown.enter="selectAnswer($event)" :value="answer.value" v-model="form.answers[question.id]" :disabled="limitReached && form.answers[question.id].indexOf(answer.value) === -1" #change="select">
<span class="font-weight-light">{{ answer.text }}</span>
</label>
</div>
</div>
</template>
Here's the radio button component.
<template>
<div class="col-12 form-group">
<h5 class="mb-4" v-html="question.text"></h5>
<img class="w-100" :src="question.image" v-if="question.image">
<div class="mb-2" v-for="(answer, index) in question.answers" :key="answer.value">
<label :class="[`${name}${index}`, 'mb-2']">
<input :ref="`question_${index}`" class="radio" type="radio" #keydown.tab.prevent="nextAnswer(answer.value)" :value="answer.value" v-model="form.answers[question.id]" #change="select">
<span class="font-weight-light">{{ answer.text }}</span>
</label>
</div>
</div>
</template>
On mounted, I select the first radio button.
mounted() {
this.$refs.question_0[0].click()
this.$refs.question_0[0].focus()
},
That works fine, but I am unable to begin cycling through the other radio buttons. When I hit tab, the cursor moves up the address bar, If I cycle through all other tab indexes I will eventually begin moving through the radio buttons. If I manually select a radio button, then I am able to cycle through the other radio buttons with tab or arrow keys as normal.
I'm trying to bind data to b-input inside a b-table however, changes to the input value will not propagate to the items of the table.
Here is my code so far:
<template>
<div :class="`col-${fields.length}`">
<h6 class="text text-center">{{header}}</h6>
<b-table
:items="items"
:fields="fields"
>
<template v-for="field in fields"
:slot="field.key" slot-scope="data">
<b-form-input class="border-0 no-shadow p-1" type="number" v-model="data.value"
></b-form-input>
</template>
</b-table>
</div>
</template>
<script>
export default {
props: [ "header", "fields", "items"]
}
</script>
Basically all I want, is to change the values of items everytime I change the corresponding value of a b-input.
But itemswill never change...
What am I doing wrong here?
The solution is to use the items directly instead of using the data.value.
<template v-for="field in fields"
:slot="field.key" slot-scope="data">
<b-form-input class="border-0 no-shadow p-1" type="number" v-model="data.item[field.key]"></b-form-input>
</template>
My requirement is something like this.
I have two radio buttons namely Live Paper and Normal Paper
If user select Live Paper another two html input elements(datatime-local,time) must be shown.
If the user selected the Normal Paper these two additional input elements should be hide.
How do I achieve this through vueJS.
This is my code.
<div class="row">
<div class="col">
<input type="radio" name="paper" value="">Live Papaer
<br>
Live on <input type="datetime-local" name="" value="" > Time <input type="time" name="" value="">
</div>
<div class="col">
<input type="radio" name="paper" value="">Normal Paper
</div>
</div>
Just initialize a property named selected in your data option
new Vue({
el:"#app",
data(){
return{
selected: 'live'
}
}
})
Bind this selected property to both the radio inputs. See that the value attribute of radio inputs is set to live and normal respectively
Set up v-if on the div you conditionally want to render. The v-if is only true when selected === 'live'
<div id="app">
<div class="row">
<div class="col">
<input type="radio" name="paper" v-model="selected" value="live">Live Papaer
<div v-if="selected === 'live'">
Live on <input type="datetime-local" name="" value="" > Time <input type="time" name="" value="">
</div>
</div>
<div class="col">
<input type="radio" name="paper" v-model="selected" value="normal">Normal Paper
</div>
</div>
Here is the fiddle
Reference: radio inputs
Have a look to these documentations :
VueJS Forms : Basics
Vue JS Forms : Radio buttons
Vue JS Conditional Rendering
Also, from the community, you can find a lot of resources to understand View Binding and Forms in VueJS :
Understand what's behind v-model
2-Way Binding in Vue with V-Model - Vue.js 2.0 Fundamentals