TymeLeaf 전달 변수 vue js

TymeLeaf 전달 변수 vue js

Tymeleaf th: 속성이 Vue bind 속성과 함께 작동하지 않음

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

위 행은 Vue와 Tymeleaf 모두에서 오류가 발생하지 않지만 페이지에 아무것도 표시되지 않습니다.

서버측으로부터의 응답을 이하에 나타냅니다.

'v-timeout:' 접두사를 제거하고 "th:attr="text=${user.filename}"과 같은 항목을 사용하면 예상대로 작동합니다.

<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:attrHTML5 비활성 속성(예:v-bind:text), 애트리뷰트명(상기 참조)을 따옴표로 묶어야 합니다.

그러면 다음과 같은 마크업이 생성됩니다.

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

이것은 유효한 Vue 바인딩 식이 아니기 때문에 실제로는 바인딩을 사용하지 않고 대신 사용하고 싶을 수 있습니다.

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

그 결과

<truncate text="Simple message"/>

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

vue의 솔루션: v-module의 또 다른 사용

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

언급URL : https://stackoverflow.com/questions/51830971/thymeleaf-pass-variable-to-vue-js