1. ホーム
  2. vue.js

[解決済み] Vue.js:各コンポーネントインスタンスにユニークなIDを設定するには?

2022-04-28 20:07:56

質問

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をもっとコントロールしたい場合は、例えば、親コンポーネントの中で生成することができます。