与 Thymeleaf 共享相同 th:field 值（数组）的单独单选按钮？

Question

我有一个表单，其中有不同的单选按钮组。使用 Thymeleaf 模板后，我很快遇到了一个问题，由于它们共享相同的 th:fields 标签，我无法对单选按钮进行分组。问题是我有一个列表来处理成分，因此不能为 th:fields 标签引用不同的字段（因为只有一个列表）。 Thymeleaf 然后将我的单选按钮选项限制为所有成分列表项之一，即使我希望能够 select 不同组中的不同单选选项（面包、酱汁、奶酪 e.t.c）。有人对此有解决方法吗？这是我的代码：

HTML 模板：

<form method="POST" th:object="${burger}">
        <div class="grid">

            <div class="ingredient-group" id="buns">
                <h3>Designate your bun:</h3>
                <div th:each="ingredient : ${bun}">
                    <input th:name="${ingredient.name}" type="radio" th:id="${ingredient.id}" th:value="${ingredient.id}" th:field="*{ingredients}" v-model="bun">
                    <label th:for="${ingredient.id}" th:text="${ingredient.name}">INGREDIENT</label>
                    <br>
                </div>
            </div>

            <div class="ingredient-group" id="meats">
                <h3>Pick your meat:</h3>
                <div th:each="ingredient : ${meat}">
                    <input th:name="${ingredient.name}" type="radio" th:id="${ingredient.id}" th:value="${ingredient.id}" th:field="*{ingredients}" v-model="meat">
                    <label th:for="${ingredient.id}" th:text="${ingredient.name}">INGREDIENT</label>
                    <br>
                </div>
            </div>

            <div class="ingredient-group" id="toppings">
                <h3>Choose your toppings:</h3>
                <div th:each="ingredient : ${topping}">
                    <input th:name="${ingredient.name}" type="checkbox" th:id="${ingredient.id}" th:value="${ingredient.id}" th:field="*{ingredients}" v-model="toppings">
                    <label th:for="${ingredient.id}" th:text="${ingredient.name}">INGREDIENT</label>
                    <br>
                </div>
            </div>

            <div class="ingredient-group" id="cheeses">
                <h3>Determine your cheese:</h3>
                <div th:each="ingredient : ${cheese}">
                    <input th:name="${ingredient.name}" type="radio" th:id="${ingredient.id}" th:value="${ingredient.id}" th:field="*{ingredients}" v-model="cheese">
                    <label th:for="${ingredient.id}" th:text="${ingredient.name}">INGREDIENT</label>
                    <br>
                </div>
            </div>

            <div class="ingredient-group" id="sauces">
                <h3>Select your sauce:</h3>
                <div th:each="ingredient : ${sauce}">
                    <input th:name="${ingredient.name}" type="radio" th:id="${ingredient.id}" th:value="${ingredient.id}" th:field="*{ingredients}" v-model="sauce">
                    <label th:for="${ingredient.id}" th:text="${ingredient.name}">INGREDIENT</label>
                    <br>
                </div>
            </div>
        </div>

        <div class="name-submit">
            <h3 class="submit-section-title row">Name your burger creation:</h3>
            <input class="submit-section-input" type="text" th:field="*{name}" v-model="burgerName"/>
            <br/>
            <button class="submit-section-button">Submit Your Burger</button>
        </div>
    </form>

我参考的汉堡模型：

@Data
public class Burger {

    @NotNull
    @Size(min=5, message="Name must be at least 5 characters long")
    private String name;

    @NotNull
    @Size(min=1, message="You must choose at least 1 ingredient")
    private List<Ingredient> ingredients;
}

Answer 1

部分选项：

改为使用复选框，并使用 JavaScript 确保它们只能 select 每个成分列表中的一种。（或者使用某种第三方库 w/selectable 按钮，这样您仍然可以使用复选框，但它们看起来不像复选框。）
为每种成分添加一个变量，并添加一个辅助方法将它们变成 List<Ingredient>/。然后您的单选按钮将正常工作，每个都绑定到不同的字段。（如果它们是可选的，可能必须在之后删除无效成分。）
```
public class Burger {
    Ingredient cheese;
    Ingredient sauce;
    Ingredient meat;

    public List<Ingredient> getIngredients() {
        return Arrays.asList(cheese, sauce, meat);
    }
```

我不认为你会从单选按钮中获得你想要的功能，它们只是不被设计成那样使用。

与 Thymeleaf 共享相同 th:field 值（数组）的单独单选按钮？

Separate radio buttons which share the same th:field value (an array) with Thymeleaf?

html

java

field

thymeleaf