将 vue js 2.0 和 Thymeleaf 与 Spring Boot 混合使用的奇怪行为答案

【问题标题】：Strange behavior by mixing vuejs 2.0 and Thymeleaf with SpringBoot将 vue js 2.0 和 Thymeleaf 与 Spring Boot 混合使用的奇怪行为
【发布时间】：2018-08-05 03:03:45
【问题描述】：

我已经使用 Vuejs 2.0 编写了一些页面。在静态模式下，我的所有组件都工作，我可以验证设计。因此，我尝试将这些页面的源代码集成到带有 Thymeleaf 的 Web Spring Boot 项目中，但没有完成一些渲染。

以下代码的用例：

<selectpicker id="selectReg" title="Sélectionnez des régions"
              data-width="100%" v-bind:multiple="true"
              v-on:selected="selectRegion" v-on:unselected="unselectRegion">

    <option value="44">Alsace-Champagne-Ardenne-Lorraine</option>
    <option value="75">Aquitaine-Limousin-Poitou-Charentes</option>
    <option value="84">Auvergne-Rhône-Alpes</option>
</selectpicker>

渲染结果为：

<selectpicker id="selectReg" title="Sélectionnez des régions"
              data-width="100%" v-bind:multiple="true"
              v-on:selected="selectRegion" v-on:unselected="unselectRegion">

    Alsace-Champagne-Ardenne-Lorraine
    Aquitaine-Limousin-Poitou-Charentes
    Auvergne-Rhône-Alpes
</selectpicker>

不保留选项。

另一个问题是 v-for 属性：

<optgroup label="Île-de-France">
    <option v-for="option in departementsFromRegion(11)" v-bind:value="option.value"
            v-bind:data-region="option.region">
        {{ option.text }}
    </option>
</optgroup>

因此，我在浏览器控制台中出现错误，提示该选项未定义。

有关信息，我已将 Thymlead 配置为 LEGACYHTML5。

有什么想法吗？

【问题讨论】：

标签： spring-boot vue.js thymeleaf

【解决方案1】：

我找到了问题的根源。 Thymeleaf 2.x 有一些问题，所以现在我使用 3.0 版本。

为此，我已将这些行添加到我的 gradle 配置中：

ext['thymeleaf.version'] = '3.0.0.RELEASE'
ext['thymeleaf-layout-dialect.version'] = '2.0.0'

【讨论】：