【Vue.js】templateプロパティで元のDOMを置換されたくない場合の対処法

【Vue.js】templateプロパティで元のDOMを置換されたくない場合の対処法

new Vue の初期化時に template プロパティを設定すると、el で指定したDOMがtemplateで置き換わってしまいます。

Railsなどで作成されるWebアプリでVue.jsを利用する際に、サーバーでDOMの出力はできているのにVueがそれを邪魔してしまう場合があります。

new Vue({
  el: '#app',
  template: '<div class="children">Hello world!</div>'
})

// <div id="app"><div class="children">Hello world!</div></div>
//
// ではなく
//
// -> <div class="children">Hello world!</div>

Vue.jsの1.xまでは、replace: false を指定することでこの問題を回避できましたが、2.0でreplaceプロパティが削除されました。

そこでこの記事では、Vue.js 2.0 以降でDOMを置換されたくない場合の解決策をご紹介したいと思います。

適用対象のDOMで改めてラップする

new Vue({
  el: '#app',
  template: '<div id="app"> ... </div>'
})

置換を許可しないオプションが存在しないので、templateの中で改めて元の要素でラップします(囲います)。

クラスや属性が無いシンプルな要素の場合に利用するのが良いでしょう。

renderプロパティを使う

new Vue({
  el: '#app',
  render: function (createElement) {
    createElement('div', {
      attrs: {
        id: 'app',
      }
    }, /* ... */)
  }
})

Vueクラスの render  プロパティを利用することでも元の要素を作ることができます。

render には描画のための関数を渡します。
その引数から要素を作成するcreateElement関数が参照できます。

createElementの第一引数にはタグ名、第二引数にはオブジェクトで要素の属性指定のためのデータオブジェクトを渡します。
第三引数には子ノードを文字列か配列で指定することができます。

第二引数に指定するデータオブジェクトは細かい指定が可能ですので、一度ドキュメントを読んでおくことをおすすめします。

この記事の参考URL:Vue 1.x からの移行 — Vue.js

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.