🕌

同じVueコンポーネントを複数使うときの注意点 | Vue3（Options API）

に公開
JavaScript
Vue 3
tech

概要

ある子コンポーネントをひとつの親コンポーネント内で複数回使うとき、子の作り方によっては、うまく動作しない場合がある。それは、子に任意の要素 ID を指定している時だ。この場合、ビュー内に複数の同一の要素 ID が存在することになってしまう。私は、Vue が ID をいい感じに変更してくれると、勝手に思っていたので、この仕様に気が付かなかった。

具体的には

ChildComponent.vue
<template>
  <div class="toggle-button">
    <input type="checkbox" id="input-box" />
    <label for="input-box"></label>
  </div>
</template>

このような子コンポーネントがあって、

ParentComponent.vue
<template>
  <ChildComponent />
  <ChildComponent />
</template>
<script>
export default {
  components: { ChildComponent },
}
</script>

このような親コンポーネントがあるとき、このチェックボックスはうまく機能しない。
具体的には、2つ目のチェックボックスをクリックしても、1つ目のチェックボックスしか機能しない。
これは、同一ビュー内に、input-boxという要素 ID が複数個存在しているから。

解決策

vue モジュールのuseIdを使う。
具体的には、子コンポーネントを以下のように変更する。

ChildComponent.vue
<template>
  <div class="toggle-button">
    <input type="checkbox" :id="inputBoxId" />
    <label :for="inputBoxId"></label>
  </div>
</template>
<script>
import { useId } from 'vue';
export default {
  computed: {
    inputBoxId: function() {
      return useId();
    },
  },
};
</script>

こうすることで、Vue が一意の要素 ID を割り振ってくれる。

Discussion