Skip to content

Form Radio Label 'for' attribute not set while using with nuxt #1820

Closed
@tarunmangukiya

Description

@tarunmangukiya

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.

image

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions