v-for实现增删input框的独立按键，双层包含新增删除的功能

两层v-for实现增删input框，并双向绑定数据
实现效果如下图所示，点击新增要求出来对应的红色大框，再点击大框里的蓝色圆圈加号添加小要求，出现红色小框。

引入文件：

<link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
<script src="../vue.js"></script>
<script src="../jquery-1.12.3.js"></script>
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>

有两层v-for，一个分别在大框的大要求层，另一层在小框的小要求层

ItemTypes：大框的数组，index必须要有，便于利用索引找到对应的位置执行删除操作；
:required=“true” ：是字体前面的红色小星星设置；
deleteItem(index) ：删除大要求的点击事件；
addDetails(item) ：新增小要求的点击事件；
(i,index2) in item.details ：第二层嵌套在ItemTypes里的循环，索引定义为index2；
@input="inputText(index2) ：小要求的input事件；
deleteDetailsItem(i,index2,item,index) ：删除小要求的点击事件
注意： < el-form-item >标签外面一定要用< el-form >，否则会报错的哈

HTML代码：

<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>

*又一个项目学习小笔记完成啦！！！有错误或优化的地方还请多多指教 *