element-ui 实现类似问卷的功能

Question

代码像这样

      <div style="margin-top:3%" v-for="(challenge,i) in Challenge" :key="i">
        <el-card style="margin-left:10%;margin-right:10%">
          <div slot="header" class="clearfix">
            <span>题目: {{ challenge.title }}</span>
          </div>
            <el-radio-group v-model="radio">
              <el-radio v-for="(option,i) in challenge.options" :label="option" :key="i" >{{ option }}</el-radio>
            </el-radio-group>
        </el-card>
      </div>

这样需要动态的radio绑定，想问怎么实现，或者有没有其他思路

Answer 1

感觉你的思路偏了，你的重点不在于代码本身，你需要关注如何去解决问题。

给你提供个思路

1. 首先，假设问题格式如下：

[
    {
        "id": 1,
        "type": "radio",
        "question": "题目1：xxx",
        "radios": [
            "111", "222", "333"
        ]
    },
    {
        "id": 2,
        "type": "check",
        "question": "题目2：xxx",
        "checks": [
            "111", "222", "333"
        ]
    },
    .... // 可以有很多类型
]

1. 你需要做的是，如何将题目去展示出来。也就是如何动态生成表单~
2. 如何获取答案。

Answer 2

el-radio-group

使用上面那个标签