Я хочу створити компонент з Vue.js, що містить мітку та вхід. наприклад :

<label for="inputId">Label text</label>
<input id="inputId" type="text" />

Як я можу встановити унікальний ідентифікатор для кожного екземпляра компонента?

Дякую.

Кожен компонент має унікальний ідентифікатор, до якого можна отримати доступ this._uid.

<template>
  <div>
    <label :for="id">Label text for {{id}}</label>
    <input :id="id" type="text" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: null
    }
  }, 
  mounted () {
    this.id = this._uid
  }
}
</script>

Якщо ви хочете більше контролювати ідентифікатори, ви можете, наприклад, генерувати їх всередині батьківського компонента.

До точки Ніхата (вище): Еван Ви радив не використовувати _uid: "vm _uid зарезервований для внутрішнього використання, і важливо зберігати його приватним (а не покладатися на нього в коді користувача), щоб ми зберігали гнучкість змінювати його поведінка для потенційних випадків використання в майбутньому. Я б запропонував створити UID самостійно [використовуючи модуль, глобальний міксін тощо] "

Використання запропонованого Mixin у цій програмі GitHub для створення UID виглядає як кращий підхід:

let uuid = 0;

export default {
  beforeCreate() {
    this.uuid = uuid.toString();
    uuid += 1;
  },
};

Оновлення: код видасть помилку, якщо ._uidвластивості в екземплярі не існує, щоб ви могли оновити її, щоб використовувати щось власні або нові унікальні властивості ідентифікатора, якщо вони надаються Vue.

Хоча відповідь zxzak чудова; _uidне є опублікованим майном api. Щоб зберегти головний біль у випадку, якщо він зміниться в майбутньому, ви можете оновити свій код лише однією зміною за допомогою додатка, як показано нижче.

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");
            }
        });
    }
});

Оновлення

Я опублікував плагін Vue-unique-id Vue для цього в npm .

Відповідь

Жодне з інших рішень не відповідає вимозі мати більше одного елемента форми у вашому компоненті. Ось мій плагін, який ґрунтується на раніше заданих відповідях:

Vue.use((Vue) => {
  // 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;
  };
});

Це не покладається на внутрішню _uidвластивість, яка зарезервована для внутрішнього використання .

Використовуйте його так у своєму компоненті:

<label :for="$id('field1')">Field 1</label>
<input :id="$id('field1')" type="text" />

<label :for="$id('field2')">Field 2</label>
<input :id="$id('field2')" type="text" />

Щоб створити щось подібне:

<label for="uid-42-field1">Field 1</label>
<input id="uid-42-field1" type="text" />

<label for="uid-42-field2">Field 2</label>
<input id="uid-42-field2" type="text" />

npm i -S lodash.uniqueid

Потім у своєму коді ...

<script>
  const uniqueId = require('lodash.uniqueid')

  export default {
    data () {
      return {
        id: ''
      }
    },
    mounted () {
       this.id = uniqueId()
    }
  }
</script>

Таким чином ви не завантажуєте всю бібліотеку lodash або навіть зберігаєте всю бібліотеку node_modules.

У Vue2 використовуйте v-bind.

Скажіть, у мене є об’єкт для опитування

  <div class="options" v-for="option in poll.body.options">
    <div class="poll-item">
      <label v-bind:for="option._id" v-bind:style="{color: option.color}">{{option.text}}</label>
      <input type="radio" v-model="picked" v-bind:value="option._id" v-bind:id="option._id">
  </div>
  </div>

Простий підхід, який я не бачив у відповідях:

<template>
  <div>
    <label :for="id">Label text for {{id}}</label>
    <input :id="id" type="text" />
  </div>
</template>

<script>
import uniqueId from 'lodash-es/uniqueId'

export default {
  computed: {
    id () {
      # return this._uid
      return uniqueId('id')
    }
  }
}
</script>

Якщо ви використовуєте TypeScript без будь-якого плагіна, ви можете просто додати статичний ідентифікатор до компонента класу та збільшити його у створеному () методі. Кожен компонент матиме унікальний ідентифікатор (додайте рядковий префікс, щоб уникнути зіткнення з іншими компонентами, які використовують ту саму підказку)

<template>
  <div>
    <label :for="id">Label text for {{id}}</label>
    <input :id="id" type="text" />
  </div>
</template>

<script lang="ts">
  ...
  @Component
  export default class MyComponent extends Vue {
    private id!: string;
    private static componentId = 0;
    ...
    created() {
      MyComponent.componentId += 1;
      this.id = `my-component-${MyComponent.componentId}`;
    }
 </script>

Цей пакет здається хорошим рішенням основної проблеми щодо наявності унікальних ідентифікаторів у вашому DOM для кількох компонентів:

vue-uniq-ids

Тенденція використання компонентів. Компоненти класні, вони невеликі, очевидні, прості у використанні та модульні. Поки це не стосується властивості id.

Для деяких атрибутів тегів HTML потрібно використовувати властивість id, наприклад, мітка [для], введення [форма] та багато атрибутів aria- *. І проблема з id полягає в тому, що він не модульний. Якщо декілька властивостей id на сторінці матимуть однакове значення, вони можуть впливати один на одного.

VueUniqIds допомагає вам позбутися цієї проблеми. Він надає набір директив, пов'язаних з id, значення яких автоматично змінюється додаванням унікальної рядки, зберігаючи attrbitue зручним для читання.

Якщо ваш uid не використовується іншим компенсатором, у мене є ідея.

uid: Math.random()

Просто і досить.

Це також можна досягти за допомогою цього шаблону (Vue 2.0 v-bind), так що скажімо, у вас є список елементів для повторення, і ви хочете надати деякому елементу dom uninque id.

new Vue({

  el:body,
  data: {
     myElementIds : [1,2,3,4,5,6,8]
   }
})

Html

<div v-for="id in myElementIds">
    <label v-bind:for="id">Label text for {{id}}</label>
    <input v-bind:id="id" type="text" />
<div> 

Сподіваюся, це допомагає