Vue.js/トピック/マウントされる以前のDOMを取得する

Vue.js/トピック/マウントされる以前のDOMを取得する

Vueオブジェクトは el で指定された要素を template の内容で完全に置換してしまうのだが、 その置換前の画面にくっついていた要素はどのようにすれば取得できるか?

という話。

これは、既存のサーバサイド側のテンプレートエンジンとの連携を考慮した場合に欲しくなった。 既存のサーバサイドと連携するにはレベルに応じて3つほどパターンがあると思われる。

  • サーバサイドは JSON を吐き出すだけで描画は全部 Vue がやる。テンプレートエンジンはマウントポイントだけ吐けばいい。
  • サーバサイドのテンプレートエンジンで Vue のテンプレートを吐いて、Vue はそのレンダリングだけやる
  • サーバサイドはテンプレートエンジンでパラメータ付きのマウントポイントを吐いてそれを Vue が管理する。

この中で一番サーバサイドのテンプレートエンジンと非侵襲的に連携するのは3番目である。

これはサーバサイドテンプレートエンジンはいつもどおり HTML を吐き出せばよく特に特別な何かをやる必要が無い。 特別な記述をする必要も無い。特にテンプレートエンジンの文法と Vue のテンプレート文法を混ぜて書く必要も無いし、そもそも混ぜて書けない部分もある。 そして、Vue もサーバサイドとまったく独立したモノとして作ってもなんの問題も無い。

うまくいきそうである。

ここで問題になるのがサーバサイドしか知らん情報を Vue 側にどうやって渡すかという話。

画像のパス一つとってもサーバサイドのテンプレートエンジンはURLを独自の設定のパス計算を行って出力したりする。 しかしそれは単に値として提供されておらず文法と統合されていたりするのでそこに Vue の介入はできなかったりする。

だったら両方が解釈できる HTML になった状態で読めばいい。

しかし Vue はマウント時にテンプレートで要素を取り替えてしまう。 なので this.$el でアクセスできない。

結論としてライフサイクル beforeMount 時点の $el がマウント前の DOM なのでこいつを適当な変数に保持してしまえばよい

javascript/vuejs/topic/get_dom_of_before_mount.txt · 最終更新: 2021-01-19 15:44 by ore