Thymeleafを通じて画面に渡された値をVue.jsで利用する #Vue.js

はじめに

テンプレートエンジンとしてはThymeleaf、フロントの処理にVue.jsを用いているプロジェクトで、行いたいajax処理の関係でどうしてもThymeleafを通じて渡された値をVue.jsで参照したくなり試行錯誤するハメになったのでその記録です。

本文

ref要素を用いることで実現可能です。
参照したい値がThymeleafによって埋め込まれたタグにref要素を追加します。
これによって $refs.hogehoge という形で対象タグのDOMを参照することができるようになります。
DOMを通じて、間接的にThymeleafで渡された値を参照するわけです。

注意すべき事項として、
「$refs.hogehoge」の利用（代入や演算はもちろんエイリアスの作成など）はコンポーネントライフサイクルのmounted以降でないといけません。
理由はもちろん、DOMが作られたあとでなければ参照のしようがないためです。
createdの段階で利用しようとすれば[undefined]となります。

sample.html

<html>
  <!-- ヘッダ省略 -->
  <body>
  <div id="wrapper">
　　  <!-- ユーザ名を表示するような場合 -->
  　　<span th:text="${username}" ref="username"></span>
  </div>
  <script>
  const app = new Vue({
    el: '#wrapper',

    created() {
      // [undefined]
      console.log(this.$refs.username.textContent);
    },

    mounted() {
      // ${username}の中身がコンソールに表示される
      console.log(this.$refs.username.textContent);
    }

  });
  </script>
  <body>
</html>

おわりに

Thymeleafのみならず、他のテンプレートエンジンでも応用可能です。
もっとも、 "ajax処理でテンプレートエンジンから渡された値を用いる" こと事態避けるべきものではあります。