Using UCheckbox with v-for breaks partial functionality

DerSimeon commented 3 months ago

Environment

Operating System: Windows_NT
Node Version: v20.15.0
Nuxt Version: 3.12.2
CLI Version: 3.12.0
Nitro Version: 2.9.6
Package Manager: yarn@4.3.1
Builder: -
User Config: devtools, future, runtimeConfig, modules
Runtime Modules: @nuxt/ui@2.17.0, nuxt-auth-utils@0.1.0, neonuxt@1.0.3
Build Modules: -

Version

3.12.2

Reproduction

https://stackblitz.com/edit/github-auu6bo?file=app.vue

Description

So I have this FormGroup inside my Form which should display x amount of Checkboxes depending on the elements in a list. While displaying it works fine, when I press the text on any of the checkboxes it always toggles the checkmark on the first element. I can press the actual square just fine but pressing the text always triggers the first element.

Additional context

No response

Logs

No response

Lootjs commented 3 months ago

Could you provide the id attribute? f.e

        <div
          v-for="tool in builderTools"
          :key="tool"
          class="flex items-center mb-2"
        >
          <UCheckbox
            :id="tool"
            :label="tool"
            v-model="state.experience"
            :value="tool"
            :name="tool"
          />
        </div>

DerSimeon commented 2 months ago

Sorry for the late response. That fixed it thanks!

nuxt / ui