레이블과 입력을 포함하는 Vue.js로 구성 요소를 만들고 싶습니다. 예 :

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

각 구성 요소 인스턴스에 대해 고유 한 ID를 설정하려면 어떻게해야합니까?

감사합니다.

답변

각 구성 요소에는로 액세스 할 수있는 고유 한 ID가 있습니다 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>

예를 들어 ID를 더 많이 제어하려면 부모 구성 요소 내에서 생성 할 수 있습니다.

답변

Nihat의 요점 (위) : Evan You는 _uid를 사용하지 말라고 조언했습니다. “vm _uid는 내부 사용을 위해 예약되어 있으며 개인용으로 유지하는 것이 중요합니다 (사용자 코드에 의존하지 않음). 잠재적 인 향후 사용 사례에 대한 동작입니다. … UID를 직접 생성하는 것이 좋습니다. [모듈, 글로벌 믹스 인 등을 사용하여] “

이 GitHub 문제 에서 제안 된 믹스 인을 사용하여 UID를 생성하는 것이 더 나은 방법 인 것 같습니다.

let uuid = 0;

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

답변

업데이트 :._uid 인스턴스에 속성이없는
경우 코드에서 오류가 발생 하므로 Vue에서 제공하는 경우 사용자 지정 또는 새로운 고유 ID 속성을 사용하도록 업데이트 할 수 있습니다.

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

[vue.js] Vue.js : 각 구성 요소 인스턴스에 대한 고유 ID를 설정하는 방법은 무엇입니까?

답변

답변

답변

답변

최신 정보

대답

답변

답변

답변