javascript - Duplicate ID when using multiple instance of a container - Stack Overflow

admin管理员组

文章数量:1291225

Let's say I have a JS ponent - I am using Vue.JS - with a checkbox and associated label in it:

<template>
    <input id="field1" type="checkbox">
    <label for="field1">
        Some label
    </label>
</template>

Now, since we designed ponents to be reusable, I want to use it in multiple places of my app, at the same time. Problem: the ID is duplicated, and clicking a checkbox's label checks another checkbox since they share the same ID.

How to solve this problem?

For now I am generating a random hex ID at ponent mount to generate unique ID values, but it feels way too hackish.

Let's say I have a JS ponent - I am using Vue.JS - with a checkbox and associated label in it:

<template>
    <input id="field1" type="checkbox">
    <label for="field1">
        Some label
    </label>
</template>

Now, since we designed ponents to be reusable, I want to use it in multiple places of my app, at the same time. Problem: the ID is duplicated, and clicking a checkbox's label checks another checkbox since they share the same ID.

How to solve this problem?

For now I am generating a random hex ID at ponent mount to generate unique ID values, but it feels way too hackish.

• javascript

Share Improve this question Follow edited Sep 16, 2018 at 20:04 Mickaël asked Sep 14, 2018 at 17:16 MickaëlMickaël 3,94255 gold badges2727 silver badges3232 bronze badges 10

• If you need the checkbox to do something specific, just use class to wire up the event handler and don't bother with the id – Ryan Wilson Commented Sep 14, 2018 at 17:18
• The ID is needed for the following label tag. I do use Vue's v-model to update the data but this was not relevant here. So I'm not sure I understand your advice :/ – Mickaël Commented Sep 14, 2018 at 17:23
• it is not a vue problem and you just shouldn't use the same id on more than one element. – Rafael Quintela Commented Sep 14, 2018 at 17:35
• If you already figured out a way to make the id unique, I don't understand what your problem is. – Ryan Wilson Commented Sep 14, 2018 at 17:37
• 1 You can use this._uid in mounted() and assign this to your id, but _uid is private and might change in the future. Check example codepen.io/anon/pen/RYBjBP – gijoe Commented Sep 14, 2018 at 17:41

 |  Show 5 more ments

4 Answers 4

Sorted by: Reset to default 9

You don't need to use an id to connect a label and an input in this specific case.

This code below achieves the same result without using HTML id

<template>
    <label>
      <input type="checkbox">
       Some label
    </label>
</template

You need to dynamically assign IDs as prop using v-bind. This way, you will be able to set it manually each time you use your ponent.

Component

<template>
  <div class="field">
    <input v-bind:id="id" type="checkbox"/>
    <label v-bind:for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  name: 'checkbox',
  props: {
    id: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    }
  }
}
</script>

**Use case**

<Checkbox id="field1" label="Some text"></Checkbox>
<Checkbox id="field2" label="Another text"></Checkbox>

**Output**

<div class="field">
  <input id="field1" type="checkbox">
  <label for="field1">Some text</label>
</div>
<div class="field">
  <input id="field2" type="checkbox">
  <label for="field2">Another text</label>
</div>

[More about props.][1]

You are right. I have a ponent which contains 5 radio buttons. When I apply several these ponents on another view, duplicated id happens

本文标签： javascriptDuplicate ID when using multiple instance of a containerStack Overflow