Ответ 1

Каждый компонент имеет уникальный идентификатор, доступ к которому можно получить как 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>

Если вы хотите больше контролировать идентификаторы, вы можете, например, генерировать их внутри родительского компонента.

Ответ 2

К пункту Нихата (выше): Эван Вы не рекомендовали использовать _uid: "vm _uid зарезервирован для внутреннего использования, и важно сохранять его закрытым (и не полагаться на него в пользовательском коде), чтобы мы сохраняли гибкость в его изменении. поведение в будущих случаях использования...... я бы предложил генерировать UID самостоятельно [с использованием модуля, глобального миксина и т.д.] "

Использование предложенного миксина в этом выпуске GitHub для генерации UID кажется лучшим подходом:

let uuid = 0;

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

Ответ 3

Обновление: код выдаст ошибку, если свойство ._uid не существует в экземпляре, так что вы можете обновить его, чтобы использовать что-то настраиваемое или новое уникальное свойство id, если оно предоставлено 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");
            }
        });
    }
});

Ответ 4

Обновить

Я опубликовал для этого плагин Vue-unique-id Vue.

Ответ

Ни одно из других решений не соответствует требованию иметь более одного элемента формы в вашем компоненте. Вот мой взгляд на плагин, который основан на ранее предоставленных ответах:

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" />

Ответ 5

В 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>

Ответ 6

Простой подход, которого я не видел в ответах:

<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>

Ответ 7

Этот пакет, кажется, является хорошим решением для основной проблемы наличия неуникальных идентификаторов в вашей DOM для нескольких компонентов:

вя-уник-ида

Это тенденция к использованию компонентов. Компоненты классные, они маленькие, наглядные, простые в использовании и модульные. Пока дело доходит до свойства id.

Некоторые атрибуты HTML-тега требуют использования свойства id, например label [for], input [form] и многих атрибутов aria- *. И проблема с идентификатором заключается в том, что он не является модульным. Если несколько свойств идентификатора на странице будут иметь одинаковое значение, они могут влиять друг на друга.

VueUniqIds поможет вам избавиться от этой проблемы. Он предоставляет набор связанных с id директив, значение которых автоматически изменяется путем добавления уникальной строки, сохраняя при этом удобство чтения атрибута.

Ответ 8

Если ваш uid не используется другим компонентом, у меня есть идея.

uid: Math.random()

Просто и достаточно.

Ответ 9

Это также может быть достигнуто с использованием этого шаблона (Vue 2.0 v-bind), поэтому, допустим, у вас есть список элементов для перебора, и вы хотите дать некоторый элемент id элемента uninque.

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> 

Надеюсь, поможет