Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
29
Help us understand the problem. What is going on with this article?
@totto357

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

More than 3 years have passed since last update.

はじめに

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

Vue.jsでは描画関数を使ったやり方が公式で説明されています。
アンカーヘッダのレベルを動的に変えるコンポーネントの例

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

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

この描画関数は普段のテンプレートに比べつらいと感じる人も多いと思います。
今回みたいな簡単な例ならば良いですが、すこしでも複雑になったらお手上げです :innocent:
これでは「親しみやすいフレームワーク」という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}` 
    } 
  },
})

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

デモ

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

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

余談

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

29
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
totto357
JavaScript, TypeScript, Vue.js, Vuetify, Nuxt.js, Almin.js あたりをメインに使っています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
29
Help us understand the problem. What is going on with this article?