vue添加无数个输入框

最新推荐文章于 2024-07-25 17:03:20 发布

少年包青菜

最新推荐文章于 2024-07-25 17:03:20 发布

阅读量879

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_50884068/article/details/121638607

版权

这是一个关于Vue.js的示例代码，展示了如何使用v-for指令创建动态输入框组，并通过方法添加新的规格组和规格条目。数据模型rr包含tt和yy字段的规格组，每个规格组内又包含kk和ll字段的规格详细信息。点击按钮可以触发asd和zxc方法，分别用于添加新的规格组和规格条目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>
        <div v-for="(sc,index) in rr" :key="index">
            <el-input v-model="sc.tt" style="width:450px"></el-input>
            <el-input v-model="sc.yy" style="width:450px"></el-input>
            <el-button type="primary" @click="asd(sc,index)">添加规格组</el-button>
            <div v-for="tg,ii of sc.oo" :key="ii">
                <el-input v-model="tg.kk" style="width:450px"></el-input>
                <el-input v-model="tg.ll" style="width:450px"></el-input>
                <el-button type="primary" @click="zxc(tg,ii)">添加</el-button>
            </div>
        </div>
        <el-button type="primary" @click="btn">确定</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            rr: [{ "tt": "", "yy": "", "oo": [{ "kk": "", "ll": "" }] }]
        }
    },
    methods: {
        btn(){console.log(this.rr);},
        asd(qa,ws) {
            this.rr.forEach((item,index)=>{
                if(index==ws){
                    this.rr.push({ "tt": "", "yy": "", "oo": [{ "kk": "", "ll": "" }] })
                }
            })
        },
        zxc(aq,sw) {
            this.rr.forEach((item,index)=>{
                if(index==sw){
                    item.oo.push({"kk": "", "ll": ""})
                }
            })
        },
    }
}
</script>

<style>
</style>