vuejs2 - ThymLeaf 将变量传递给 vue js

标签 vuejs2 thymeleaf

Thymeleaf th:attr 不适用于 Vue 绑定(bind)属性

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

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

以下是服务器端的响应

Attached image showing perfect response from server side

一旦我删除'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>  

最佳答案

您需要使用 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

更新:使用 th:attr对于 HTML5 无效属性(如 v-bind:text ),您需要引用属性名称(已在上面修复)。

这会产生以下标记
<div>
  <truncate v-bind:text="Simple Message"/>
</div>

您可能会注意到这不是一个有效的 Vue 绑定(bind)表达式,因此您可能实际上并不想使用绑定(bind),而是使用
<truncate th:attr="text=${message}"/>

这会产生
<truncate text="Simple message"/>

关于vuejs2 - ThymLeaf 将变量传递给 vue js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51830971/

相关文章:

javascript - Vue动态添加详情内容行的方式

vue.js - Vue-Router:通过正确的身份验证保护私有(private)路由

java - 如何将 id 传递给 :value and get data of type List<Ingredient>?

java - 重定向不适用于 Spring Boot 应用程序中的 Thymeleaf

vue.js - 我不明白 vuejs 模板文件中带有 hashtag 的模板标签

javascript - 如何使用 VueJS 防止数字输入

vue.js - 如何观察父组件的子属性变化

java - 为什么 Controller 需要在绑定(bind)错误上添加模型

thymeleaf - Thymeleaf 中 #request.getParameters() 的解决方法

java - Thymeleaf 中图像的相对路径