Vue js How to set a unique ID for each component instance

Question

I want to create a component with Vue js containing a label and an input  for example     lt label for  inputId  gt Label text lt  label gt   lt input id  inputId  type  text    gt    How can I set a unique ID for each component instance   Thank you

User · Answer

This package seems to be a good solution for the underlying issue of having non-unique IDs in your DOM across multiple components:

vue-uniq-ids

It is a trend to use components. Components are cool, they are small, obvious, easy to use and modular. Untill it comes to the id property.

Some HTML tag attributes requires using an id property, like label[for], input[form] and many of aria-* attributes. And the problem with the id is that it is not modular. If several id properties on the page will has the same value they can affect each other.

VueUniqIds helps you to get rid of this problem. It provides the set of id-related directives which value is automatically modified by adding unique string while keeping the attrbitue easy to read.

User · Answer

In Vue2  use v-bind   Say I have an object for a poll     lt div class  options  v-for  option in poll body options  gt       lt div class  poll-item  gt         lt label v-bind for  option  id  v-bind style   color  option color   gt   option text   lt  label gt         lt input type  radio  v-model  picked  v-bind value  option  id  v-bind id  option  id  gt     lt  div gt     lt  div gt

User · Answer

A simple approach that I haven t seen in the replies is    lt template gt     lt div gt       lt label  for  id  gt Label text for   id   lt  label gt       lt input  id  id  type  text    gt     lt  div gt   lt  template gt    lt script gt  import uniqueId from  lodash-es uniqueId   export default     computed        id              return this  uid       return uniqueId  id                lt  script gt

User · Answer

Use this  this  options  scopeId  - is the same identifier used in  style scoped  section

User · Answer

Each component has a unique id which can be accessed as this  uid     lt template gt     lt div gt       lt label  for  id  gt Label text for   id   lt  label gt       lt input  id  id  type  text    gt     lt  div gt   lt  template gt    lt script gt  export default     data          return         id  null               mounted          this id   this  uid        lt  script gt    If you want more control over the ids you can for example  generate them inside a parent component

User · Answer

If you re using TypeScript  without any plugin  you could simply add a static id in your class component and increment it in the created   method  Each component will have a unique id  add a string prefix to avoid collision with another components which use the same tip    lt template gt     lt div gt       lt label  for  id  gt Label text for   id   lt  label gt       lt input  id  id  type  text    gt     lt  div gt   lt  template gt    lt script lang  ts  gt           Component   export default class MyComponent extends Vue       private id   string      private static componentId   0              created           MyComponent componentId    1        this id    my-component-  MyComponent componentId            lt  script gt

User · Answer

To Nihat s point  above   Evan You has advised against using  uid   The vm  uid is reserved for internal use and it s important to keep it private  and not rely on it in user code  so that we keep the flexibility to change its behavior for potential future use cases      I d suggest generating UIDs yourself  using a module  a global mixin  etc     Using the suggested mixin in this GitHub issue to generate the UID seems like a better approach   let uuid   0   export default     beforeCreate         this uuid   uuid toString        uuid    1

User · Answer

Update  I published the vue-unique-id Vue plugin for this on npm   Answer  None of the other solutions address the requirement of having more than one form element in your component  Here s my take on a plugin that builds on previously given answers   Vue use  Vue    gt         Assign a unique id to each component   let uuid   0    Vue mixin       beforeCreate  function           this uuid   uuid toString          uuid    1                     Generate a component-scoped id   Vue prototype  id   function id        return  uid-    this uuid    -    id             This doesn t rely on the internal  uid property which is reserved for internal use   Use it like this in your component    lt label  for   id  field1    gt Field 1 lt  label gt   lt input  id   id  field1    type  text    gt    lt label  for   id  field2    gt Field 2 lt  label gt   lt input  id   id  field2    type  text    gt    To produce something like this    lt label for  uid-42-field1  gt Field 1 lt  label gt   lt input id  uid-42-field1  type  text    gt    lt label for  uid-42-field2  gt Field 2 lt  label gt   lt input id  uid-42-field2  type  text    gt

User · Answer

It can also be achieved using this pattern   Vue 2 0 v-bind    so let say you have a list of items to iterate over and you want to give some dom element uninque id s   new Vue      el body    data         myElementIds    1 2 3 4 5 6 8            Html   lt div v-for  id in myElementIds  gt       lt label v-bind for  id  gt Label text for   id   lt  label gt       lt input v-bind id  id  type  text    gt   lt div gt     Hope it helps

User · Answer

If your uid is not used by other compoment  I have an idea   uid  Math random    Simple and enough

User · Answer

Update  Code will throw an error if   uid property does not exist in the instance so that you can update it to use something custom or new unique id property if provided by Vue    Although zxzak s answer is great   uid is not a published api property  To save a headache in case it changes in the future  you can update your code with just one change with a plugin solution like below    Vue use       install  function Vue  options            Object defineProperty Vue prototype   uniqId                 get  function uniqId                     if    uid  in this                       return this  uid                                    throw new Error   uid property does not exist

User · Answer

npm i -S lodash uniqueid   Then in your code      lt script gt    const uniqueId   require  lodash uniqueid      export default       data            return           id                        mounted             this id   uniqueId              lt  script gt    This way you re not loading the entire lodash library  or even saving the entire library to node modules

[vue.js] Vue.js : How to set a unique ID for each component instance?

Examples related to vue.js