Two-layer v-for implements adding and deleting input boxes, and
the effect of two-way binding data is shown in the figure below. Click the big red box corresponding to the new requirement, and then click the blue circle plus sign in the big box to add a small requirement, and a red color will appear. small box.
import file:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<script src="../vue.js"></script>
<script src="../jquery-1.12.3.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
There are two layers of v-for, one is in the large request layer of the large frame, and the other is in the small request layer of the small frame
ItemTypes: an array of large boxes, index must be available, so that the index can be used to find the corresponding position to perform the delete operation; :
required="true": It is the red star setting in front of the font;
deleteItem(index): Delete the click event of the large request ;
addDetails(item) : add a small request click event;
(i,index2) in item.details : the second loop nested in ItemTypes, the index is defined as index2;
@input="inputText(index2) : small The required input event;
deleteDetailsItem(i,index2,item,index): Delete the click event of the small request
Note: < el-form-item > must be used outside the < el-form-item > tag, otherwise an error will be reported.
HTML code:
<div id="app">
<el-form>
<div v-for="(item,index) in ItemTypes" :key="index" style="margin-bottom: 2%; box-shadow: 0px 0px 5px grey; padding: 10px; border-radius: 1rem; ">
<el-form-item :required="true" label="大要求内容:">
<el-input v-model="item.NAME"
type="textarea"
maxlength="66"
show-word-limit
style="width:80%"
placeholder="请填写大要求内容">
</el-input>
<el-button type="danger" @click="deleteItem(index)">-</el-button>
</el-form-item>
<el-button type="primary" icon="el-icon-plus" circle @click="addDetails(item)"></el-button>
<span style="color: #c0c4cc; font-size: 18px; "> 点击添加小要求</span>
<br />
<div v-for="(i,index2) in item.details" :key="index2" style="margin-top: 2%;">
<el-form-item :required="true" label="小要求:">
<el-input v-model="i.DESCRIPTION"
type="textarea"
maxlength="66"
show-word-limit
style="width:80%"
placeholder="请填写小要求"
@input="inputText(index2)" >
</el-input>
<el-button type="danger" @click="deleteDetailsItem(i,index2,item,index)">-</el-button>
</el-form-item>
</div>
</div>
<el-button type="primary" @click="addItem">新增要求 </el-button>
</el-form>
</div>
JS：
<script>
var app = new Vue({
el: '#app',
data: {
//ItemTypes:[],
Itemdetails:[],
ItemTypes: [ //大要求
{
ACCESS_ID: 0,
NAME: '',
details: [] //这里存的是小要求里的数据
}
],
},
methods:{
//弹框中删除大要求按钮项
deleteItem(index) {
if (this.ItemTypes.length <= 1) {
//如果只有一个输入框则不可以删除
return false
}
this.ItemTypes.splice(index, 1) //删除了数组中对应的数据也就将这个位置的输入框删除
},
//新增大要求项
addItem(item) {
console.log("item",item);
this.ItemTypes.push( //增加就push进数组一个新值
{
ACCESS_ID: 0,
NAME:'',
details: []
}
)
},
//新增小要求部分
addDetails(item) {
this.Itemdetails = item.details;
this.Itemdetails.push(
{
ACCESS_ID: 0,
ACCESSITEMTYPE_ID: 0,
DESCRIPTION: [],
ATYPE: 1
}
)
},
//删除小要求部分
deleteDetailsItem(i, index2, item,index) {
console.log(item);
if (this.Itemdetails.length <= 1) {
return false
}
this.ItemTypes[index].details.splice(index2, 1); //找到大要求里index中对应的小要求index2索引值
},
//小要求中的input事件
inputText(index2){
console.log("index2",index2);
}
}
})
</script>
*Another project learning note is completed! ! ! Please advise if there are errors or optimizations *