欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue添加无数个输入框

程序员文章站 2022-06-20 10:54:03
...
<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>