ThymeLeaf pass variable to vue js

Question

Thymeleaf th:attr not working with Vue bind property

<truncate th:attr="'v-bind:text'=${message}"/>

The above line not giving me error in both Vue and Thymeleaf but nothing display on page

below is the response from server side

Once I remove 'v-bind:' prefix and use some thing like "th:attr="text=${user.comment}" its working as expected

<div class="col-lg-12 col-sm-12 col-xs-12 row_block_padding" th:each="user : ${response.users}">

    <!-- OTHER CODE -->
    <div class="col-lg-10 col-sm-10 col-xs-10" style="padding-top: 15px;">
        <truncate th:attr="text=${user.comment}"></truncate>
    </div>
</div>  

Answer 1

You'll need to use the th:attr directive. For example

<div th:with="message='Simple message'">
  <truncate th:attr="'v-bind:text'=${message}"/>
</div>

See https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-the-value-of-any-attribute

---

Update: to use th:attr with HTML5 invalid attributes (like v-bind:text), you need to quote the attribute name (fixed above).

This produces the following markup

<div>
  <truncate v-bind:text="Simple Message"/>
</div>

You may note that this is not a valid Vue binding expression so perhaps you don't actually want to use binding and instead use

<truncate th:attr="text=${message}"/>

which would produce

<truncate text="Simple message"/>