[Nuxt UI] nuxt 3, UCheckbox misclicking to the first item | Nuxt | Page 1

midnight void May 16, 2024, 8:50 AM

#

Hi everyone 👋 ,

I have rather unusual problem and not sure where to look!

I'm using Nuxt UI UCheckbox component inside a UFormGroup which is rendered as an array. Clicking on any of the checkboxes (outside of the checkbox boundary) always select the first checkbox for some reason. There are no errors in the console or such, I reckon it must be something to do with CSS messing something up.

I've attached a gif with the described issue, and here's my code below. Any pointers would be appreciated! 🙂

          <UFormGroup label="Select 3 tags" required>
            <div class="flex gap-3 flex-wrap">
              <UCheckbox
                v-for="tagItem in tagOptions"
                :disabled="isCheckboxDisabled(tagItem)"
                :key="tagItem.id"
                :checked="selectedTags.some((tag) => tag.id === tagItem.id)"
                @change="toggleCheckbox(tagItem)"
                :ui="{
                  wrapper:
                    'bg-violet-50 px-2 py-1 flex items-center rounded-full w-fit',
                  inner: 'ms-2 checked:bg-zinc-500',
                }"
              >
                <template #label>
                  <span
                    :class="[
                      'font-normal transition-all',
                      isCheckboxDisabled(tagItem)
                        ? 'text-zinc-400'
                        : 'text-zinc-800',
                    ]"
                    >{{ tagItem.name }}</span
                  >
                </template>
              </UCheckbox>