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>
相关推荐
teeeeeeemo15 分钟前
http和https的区别
开发语言·网络·笔记·网络协议·http·https
wuxuanok22 分钟前
Web后端开发-Mybatis
java·开发语言·笔记·学习·mybatis
江城开朗的豌豆28 分钟前
Vue组件DIY指南:手把手教你玩转自定义组件
前端·javascript·vue.js
卷到起飞的数分1 小时前
Java零基础笔记07(Java编程核心:面向对象编程 {类,static关键字})
java·开发语言·笔记
iFulling1 小时前
【计算机网络】第三章:数据链路层(下)
网络·笔记·计算机网络
巴伦是只猫1 小时前
【机器学习笔记 Ⅱ】4 神经网络中的推理
笔记·神经网络·机器学习
java攻城狮k2 小时前
【跟着PMP学习项目管理】项目管理 之 成本管理知识点
经验分享·笔记·学习·产品经理
Dann Hiroaki10 小时前
笔记分享: 哈尔滨工业大学CS31002编译原理——02. 语法分析
笔记·算法
KhalilRuan11 小时前
Unity-MMORPG内容笔记-其三
笔记
kfepiza12 小时前
Debian的`/etc/network/interfaces`的`allow-hotplug`和`auto`对比讲解 笔记250704
linux·服务器·网络·笔记·debian