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>