循环复选框答题，分别传多个值

╰半夏微凉° 2022-11-29 05:52 122阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <body>
        <div id="center" v-cloak>
          <div>
            <div
              v-for="item in questioinList"
              :key="item.testId"
            >
              <p>{
       {item.testContent}}</p>
                <el-checkbox  v-for="(item1, i) in item.testOptions" :key="item1.optionLetter" :label="item1.optionLetter"  @change="(v) => handleCheckedCitiesChange(v,item.testId,item1.optionLetter)">{
       {item1.optionContent}}</el-checkbox>
            </div>
            <el-button @click="submit">提交</el-button>
          </div>
        </div>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
        <script type="text/javascript">
            var app = new Vue({
                el: '#center',
                data: {
                  choosed:{},
                  questioinList: []
                  },
                created() {
                  setTimeout(()=> {
                    this.questioinList = [
                      {
                        testContent: "问题1",
                        testId: "A",
                        testOptions:[
                            {
                                createBy: null,
                                createTime: null,
                                id: "2O4oNav_5WxBd913wZKeOA",
                                optionContent: "选项A",
                                optionLetter: "1",
                                testId: "A",
                                updateBy: null,
                                updateTime: null,
                            },
                            {
    
                                createBy: null,
                                createTime: null,
                                id: "2O4oNav_5WxBd913wZKeOA",
                                optionContent: "选项A1",
                                optionLetter: "2",
                                testId: "A",
                                updateBy: null,
                                updateTime: null,
                            }
                        ],
                        testScore: 25,
                        testType: 2
                      },{
                        testContent: "问题2",
                        testId: "B",
                        testOptions:[
                            {
                                createBy: null,
                                createTime: null,
                                id: "2O4oNav_5WxBd913wZKeOA",
                                optionContent: "选项B",
                                optionLetter: "1",
                                testId: "B",
                                updateBy: null,
                                updateTime: null,
                            },
                            {
    
                                createBy: null,
                                createTime: null,
                                id: "2O4oNav_5WxBd913wZKeOA",
                                optionContent: "选项B1",
                                optionLetter: "2",
                                testId: "B",
                                updateBy: null,
                                updateTime: null,
                            }
                        ],
                        testScore: 25,
                        testType: 2
                      }
                    ]
    
                  }, 1000)
                },
                methods: {
                  handleCheckedCitiesChange(val, id, checked) {
                    console.log(val, id, checked)
                    if (!this.choosed[id]) {
                      this.choosed[id] = []
                    }
                    if (val) {
                      this.choosed[id].push(checked)
                    } else {
                      const i = this.choosed[id].indexOf(checked)
                      this.choosed[id].splice(i, 1)
                    }
                  },
                  submit() {
                    const arr = []
                    Object.keys(this.choosed).map(res => {
                      arr.push({
                        testId: res,
                        answer: this.choosed[res]
                      })
                    })
                    console.log(arr)
                  }
                }
            })
        </script>
    
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: /images/20221124/f0ca64684a9843009936e92b419ad9d8.png