Thymeleaf复用Modal片段多实例冲突问题及解决方法

问题场景 #

• 将Modal封装为Thymeleaf可复用片段，单个实例在页面中调用完全正常
• 同一页面添加第二个Modal实例时出现异常：
  • 两个Modal加载完全相同的字段内容
  • 第二个Modal布局错乱
  • 浏览器控制台提示ID重复
• 尝试修改片段名称（例如将fields改为fields2），问题未解决，推测是Thymeleaf的this上下文解析逻辑导致的问题

解决方法 #

1. 修改Modal片段中对fields参数的引用方式，使用动态片段引用语法：

   ~{this::${fields}}
   

2. 在页面调用Modal片段时，传入唯一的片段名称作为参数，例如：

   <!-- 第一个Modal实例 -->
   <th:block th:replace="~{fragments/modal :: modal(fields='camposModalUsuario')}"></th:block>
   
   <!-- 第二个Modal实例 -->
   <th:block th:replace="~{fragments/modal :: modal(fields='camposModalProducto')}"></th:block>
   

经过以上调整，多个Modal实例可独立正常运行，不再出现字段重复、ID冲突和布局错乱的问题。

内容的提问来源于stack exchange，提问作者Ivan Rovira