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>
相关推荐
A_nanda5 小时前
根据AI提示排查vue前端项目
前端·javascript·vue.js
xuhaoyu_cpp_java6 小时前
过滤器与监听器学习
java·经验分享·笔记·学习
LegendNoTitle6 小时前
计算机三级等级考试 网络技术 选择题考点详细梳理
服务器·前端·经验分享·笔记·php
Oll Correct8 小时前
实验八:验证以太网交换机的生成树协议STP
网络·笔记
_李小白9 小时前
【OSG学习笔记】Day 2: Hello Cow
笔记·学习
鹭天9 小时前
Langchain学习笔记
笔记·学习·langchain
GLDbalala9 小时前
GPU PRO 5 - 1.2 Reducing Texture Memory Usage by 2-Channel Color Encoding 笔记
笔记
IT199510 小时前
Docker笔记-对docker-compose.yml基本认识
笔记·docker·容器
前端Hardy10 小时前
别再手动写 loading 了!封装一个自动防重提交的 Hook
前端·javascript·vue.js