はじめに
テンプレートエンジンとしては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処理でテンプレートエンジンから渡された値を用いる" こと事態避けるべきものではあります。