ThymeLeaf将变量传递给Vue JS

Question

Thymeleaf th：attr无法使用Vue绑定属性

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

上面的行在Vue和Thymeleaf中都没有给我错误，但是在页面上没有任何显示

下面是服务器端的响应

一旦我删除了'v-bind：'前缀并按预期使用了类似“ th：attr =” text = $ {user.comment}“之类的东西

<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

您将需要使用th:attr指令。例如

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

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

---

更新：要对HTML5无效属性（例如th:attr）使用v-bind:text，则需要引用属性名称（上面已修正）。

这会产生以下标记

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

您可能会注意到这不是有效的Vue绑定表达式，因此也许您实际上不想使用绑定，而是使用

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

会产生

<truncate text="Simple message"/>

Answer 2

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

vue的解决方案：v-bind的另一种用法

https://vuejs.org/v2/api/#v-bind