thymleafとvue.jsでバインドしたい箇所が被った

表題についてです。

自動計算をvue.jsで、初期値をthymleafで書きたい場合ってどうしたらいいのでしょうか？

よろしくお願いします。

html
1//初期値
2<input type="text" th:value="${price}" />
3
4//自動計算
5<input type="text" v-bind:value="price | number_format">
6

退会済みユーザー

2019/05/26 12:33

xmlns的には同時設定でもいいはずですが？

2019/05/26 23:17 編集

確かに、案外同時設定も行けそうな気はします。

2019/05/28 00:26

ありがとうございます!そちらでも試してみます！

行動規範の内容に同意します

回答1件

ベストアンサー

watchでつなぐのはどうでしょう？
Vueのインスタンスのpriceに対してはvueInstance.priceの形でアクセスできます。

thymleafは触ったことがないですが、priceの値の変更を監視して、vueのほうの値を更新すればよいはずです。

投稿2019/05/26 23:16

総合スコア767

2019/05/28 00:26

ありがとうございます。その方法で実装してみます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問