Vue&elementui动态渲染Radio,Checkbox,笔记

html 复制代码
<div id="app">
    <el-card style="width: 300px">
        <el-form label-position="top" size="mini">
            <el-form-item label="标题">
                <el-input></el-input>
            </el-form-item>
            <el-form-item v-for="item in questions" :key="item.id" :label="item.label">
                <el-radio-group v-model="item.check">
                    <el-radio v-for="it in item.options" :key="'uni_'+item.id+'_'+it.value" :label="'uni_'+item.id+'_'+it.value">{{ it.key }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-form>
    </el-card>
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: () => {
            return {
                form: {
                    radioGroup: ''
                },
                questions: [
                    {
                        label: '您的性别?', id: 1, options: [{key: '男', value: 1}, {key: '女', value: 0}]
                    },
                    {
                        label: '您的婚姻状况是?', id: 2, options: [{key: '未婚', value: 0}, {key: '已婚', value: 1}]
                    }
                ]
            }
        },
        methods: {
            submit() {
                console.log(this.questions)
            }
        }
    })
</script>
相关推荐
wp123_16 小时前
硬件元器件笔记|IPX8 防水 Type‑C 母座安费诺 124018802112A 与 TONEVEE TY48086‑24A 分析
c语言·开发语言·笔记
mifengxing7 小时前
操作系统 文件系统
笔记·操作系统·计算机408
资源大佬星 课it8 小时前
重学C++ ,重构你的C++知识体系
vue.js·docker·django
无聊的菜鸟8 小时前
TMS320F2806X学习笔记(零)—— C2000、CCS、新建工程
笔记·mcu·c2000·f2806x
Eason_Lou9 小时前
【无标题】
前端·vue.js·html
ljt27249606619 小时前
Compose笔记(八十三)--onVisibilityChanged
笔记
Eason_Lou11 小时前
vue flow使用注意事项
前端·vue.js
Fa_Mian_Tuan13 小时前
图论基础|邻接矩阵超详细讲解(含无向/有向/带权图+完整可运行C语言代码)
c语言·数据结构·笔记·算法·图论
zhangrelay14 小时前
ROS 2 Lyrical 第9章 计算机视觉与摄像头应用
linux·笔记·学习·ubuntu·机器人·ros2
FakeOccupational15 小时前
【电路笔记 STM32】stm32f103 实现HAL_UART_Transmit_DMA + 普通模式/连续模式的 UART DMA 收发
笔记·stm32·嵌入式硬件