Vue.jsでテンプレートのタグを動的に変える

はじめに

動的にHTMLのタグを変えたいときってありませんか？

Vue.jsでは描画関数を使ったやり方が公式で説明されています。
[アンカーヘッダのレベルを動的に変えるコンポーネントの例] (https://jp.vuejs.org/v2/guide/render-function.html)

コンポーネントの部分だけ見てみます。

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // タグ名
      this.$slots.default // 子の配列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

この描画関数は普段のテンプレートに比べつらいと感じる人も多いと思います。
今回みたいな簡単な例ならば良いですが、すこしでも複雑になったらお手上げです
これでは「親しみやすいフレームワーク」というVue.jsの思想から遠ざかってしまいます。

そこで慣れ親しんだテンプレートで同じことをするためにisを使います。

is

公式のisの説明 (https://jp.vuejs.org/v2/api/#is)

isはコンポーネントの動的に切り替えに使われるイメージですが、タグを切り替える用途にも使えます。
アンカーヘッダ－を動的に変えるコンポーネントをisを使って実装してみます。

Vue.component('anchored-heading', {
  template: '<compnent :is="tag"><slot></slot></compnent>',
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  computed: {
    tag() {
      return `h${this.level}` 
    } 
  },
})

これならさらっと書けそうですね！
今回はjs上でテンプレートを書きましたが、もちろん単一ファイルコンポーネントとして書くこともできます。

デモ

CodePenでisを使った例と描画関数を使った例を並べてみました。
Levelを変えると、動的にHTMLも書き換えられているのが確認できると思います。

See the Pen Change Tag with Vue.js Template by totto357 (@totto357) on CodePen.

余談

CodePenが埋め込めるようになったのめっちゃ便利ですね
Qiitaさんありがとう。