时间戳

首页 > 解决方案 > VueJS - 如何处理多组复选框，使用 v-for 呈现

javascript - VueJS - 如何处理多组复选框，使用 v-for 呈现

问题描述

我有以下情况。Questions我从我的后端得到一个列表，每个都Question包含以下属性：

现在，我正在渲染问题并将它们显示为一个简单v-for的表单，并且是一组复选框（也用 渲染）。Statement<p>choicesv-for

Question Statement 1
[x] choice1
[] choice2
[x] choice3
--------------------
Question Statement 2
[x] choice1
[x] choice2
[] choice3
--------------------
Question Statement 3
[x] choice1
[] choice2
[] choice3
--------------------

我知道如何将一组复选框绑定到给定属性，但这里我没有一组复选框，而是多个，具体取决于从后端获取的问题数量。我想最后提交表单并向后端发送一个 HTTP POST 请求，并给出答案（如下所示）：

[
    {
        "questionId": 1,
        "selectedAnswers": [choice1, choice3]
    },
    {
        "questionId": 2,
        "selectedAnswers": [choice1, choice2]
    },
    {
        "questionId": 3,
        "selectedAnswers": [choice1]
    }
]

我的问题是我找不到绑定所有选定选项的方法。如果我选择并排列并将它们绑定到input最后v-model一个复选框中，我将选择将覆盖所有内容。我需要以某种方式将所选选项的数组与 questionId 绑定在一起，以便一切都是独一无二的。

你对此有什么线索吗？

非常感谢！

标签： javascriptformsvue.js

解决方案

在获取它们后，从来自后端的项目创建一个对象：

// presuming the variable holding your backend data is called `data`

let questions = [...data]

for (let question of questions) {
    question['selectedChoices'] = []
}

现在使用 questions 数组呈现您的问题，并将每个问题中的复选框绑定到selectedChoices数组。

推荐阅读