Vuejs テンプレート内でのid重複を回避する【idを振りなおす】

テンプレート内でidを使用しているため、テンプレートで複数呼び出したら、idが重複してしまい、警告されてしまいました...。

しかし、テンプレートの中身を弄ると、影響範囲も広く、面倒なため、idを振りなおすように記述することにしました。

現状サンプル（問題の状態）

var mainTemplate = {
    template: '#main-template',
}
var vm = new Vue({
    el: "#app",
    components: {
        'main-template': mainTemplate,
    },
});
<div id="app">
  <main-template id="sample1">サンプル1</main-template>
  <main-template id="sample2">サンプル2</main-template>
</div>
<script type="text/x-template" id="main-template">
  <div id="test">
    <slot></slot>
  </div>
</script>

このままでは以下のようなタグが生成され、「test」というIDが重複してしまいます。

<div id="sample">
  サンプル1
</div>
<div id="sample">
  サンプル2
</div>

改善後

var mainTemplate = {
    template: '#main-template',
}
var vm = new Vue({
    el: "#app",
    components: {
        'main-template': mainTemplate,
    },
    mounted: function(){
      var allTag = document.getElementById('sample2').getElementsByTagName('*');
      for (var i = 0; allTag.length > i; i++){
        if(allTag[i].id != ''){
          allTag[i].id += '2';
        }
      }
    }
});
<div id="app">
  <main-template id="sample1">サンプル1</main-template>
  <main-template id="sample2">サンプル2</main-template>
</div>
<script type="text/x-template" id="main-template">
  <div id="test">
    <slot></slot>
  </div>
</script>

mountedの処理を追加しました。

これは、タグ生成前に実行される処理です。

ここでは、sample2というidを渡したテンプレート内に存在するすべてのIDの後ろに「２」を追加します。

これでIDが被らなくなりました。

ただ、このやり方だと、テンプレート内のタグをすべて取得し、for文で回し、idを書き換えるため、処理が重たくなり、あまり良い方法ではないかもしれません。

他に、

・v-bindを使用し、「:id="'sample' + num"」のようにする

・vue-uidプラグインを使用する

という方法もあります。

しかし、前者の場合、書き方が悪かったのかうまく動作ができなかったです。