Vue.js のコンポーネント内にあるある要素に固定値のパラメータを渡したい場合があるその場合はどうするのか。

流れとしては親となる Vue コンポーネントを含むタグ群を Thymeleaf がレンダリングして、そこに埋まっているパラメータを元に Vue.js が駆動してコンポーネントの中身がレンダリングされる。

つまりコンポーネントは何をしないといけないかというと、props で受けて、内部のテンプレートでその値を描画するか v-bind するということになる。

コンポーネントの props に値を渡すにはどうすればいいかというと、コンポーネントのタグに v-bind すればよい。

つまりこうなりそうではある・・・が・・・

<hogehoge v-bind:piyo="${fuga}" />

のだがここに問題がある。そもそもこいつ自体が Thymeleaf の属性ではないので Thymeleaf が駆動しない。 なのでこうする。

<hogehoge th:v-bind:piyo="${fuga}" />

th の名前空間をつけておけば任意の属性を Thymeleaf 管理にできるようだ。

これで記述の解釈が動いて狙った属性に値がセットできるようになった。

この記述で thymeleaf が解釈する部分は ${fuga} の部分でありほかはそのままである。 もし Spring Boot 側で fuga に対して fugafuga と割当られていたとすると、Thymeleaf 部分だけのレンダリングはこうなる。

<hogehoge v-bind:piyo="fugafuga" />

こいつを Vue.js が解釈するとどうなるかというと fugafuga はテンプレートを動かすきっかけとなる親コンポーネントの data の中の fugafuga というキーになってしまう。つまり Spring Boot から送り込みたいそれではない。

Vue.js ではキーとして解釈させず値として解釈させたい場合シングルクォートで括る

ではそれならこのように記述してみる

<hogehoge th:v-bind:piyo="'${fuga}'" />

こうすると今度はこのシングルクォートが Thymeleaf のリテラル解釈に入ってしまいこのようにレンダリングされる

<hogehoge tv-bind:piyo="${fuga}" />

当然 Vue.js では解釈できないので狙った動きにならない。

ということで最終的にはこうなる。

<hogehoge tv-bind:piyo="'\'' + ${fuga} + '\''" />