Closed
Description
I am using Bootstrap-vue in my Nuxt project.
Bootstrap-vue version: ^2.0.0-rc.9
Browser: Chrome
The Form Radio is produced via for loop using data from backend. Initially I observed some of checkboxes and radio buttons un-clickable. Looking into the html markup of the same, we can identify that the label tag is not having for attribute that can access the original underlying radio control.
Sample Code:
`
<div :class="$style.licenses">
<b-form-radio-group :checked="selectedLicense.id" @change="onChange">
<b-form-radio
v-for="license in licenses"
:key="license.id"
:value="license.id"
:class="$style.license"
>
<span>{{ license.name }}</span>
<template
v-if="license.downloaded_by_user"
>
<span
:class="[$style.price, $style.purchased]"
>
Purchased
</span>
</template>
<price
v-else
:amount="license.price"
:class="$style.price"
></price>
</b-form-radio>
</b-form-radio-group>
</div>
`
I tried with nuxt in production mode too, but it's acting the same. It doesn't work even if I put a form-radio component without for some components, while it works while hot-reloading of the component.
Metadata
Metadata
Assignees
Labels
No labels