In the vue project, enter a number in the input box, and add the number of objects corresponding to the number to the array

describe

The title is not very clear. Combined with the following renderings, describe this function here. When you enter a number in the input box, how many pieces of data will be generated below (enter the number 2 here, and two pieces of data will be generated below, as shown in the figure below Each line in a data).

Realization idea

1. Bind the enter event and focus event in the input box, and use v-model to bind a variable PepNumber, which is used to bind the value entered in the input box; 2. Define each piece of data below
as Object obj;
3. Define a variable PepoleNumber, which is an array type;
4. Bind the defined array type variable in the outermost div of each piece of data;
5. After entering the value in the input box, press Press Enter to trigger the Enter event. In the Enter event, the object obj is pushed to the array PepoleNumber by looping PepNumber;
6. When the input box gets the focus again, the Focus event is triggered. In this event, the The array PepoleNumber is cleared;

Problem: There is a small shortcoming here. Only after entering a value in the input box, press Enter, and then lose focus, and then get focus, can the PepoleNumber array be cleared. If you enter a value and press Enter, at this time It is not out of focus, enter the value again, and then press Enter, a piece of data will be added to the original array, and the original array of the array will not be cleared

code part

html part

<div class="Add_people">
          <!-- 标题 -->
          <div class="Add_people_title">
            <span style="margin-left:27px;">姓名:</span>
            <span style="margin-left:138px;">性别:</span>
            <span style="margin-left:142px;">与填报人关系:</span>
            <span style="margin-left:72px;">公民身份证:</span>
            <span style="margin-left:236px;">出生日期:</span>
          </div>
          <!-- 内容 -->
          <div  v-for="(item,index) in PepoleNumber" :key="index" >
            <el-form  :model="item.fifteenYearsOldArr"  :ref="'fifteenYearsOldArr'+ index" label-width="28px">
              <div  style="display:flex;">
                <el-form-item>
                  <el-input class="add_people_value" v-model="item.hrmEmployeeName "  placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item >
                  <el-select class="add_people_value"  v-model="item.hrmEmployeeSex"  placeholder="请输入人数">
                    <el-option v-for="(item,index) in item.hrmEmployeeSexdata" :key="index" :label="item.value" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item >
                  <el-select class="add_people_value"  v-model="item.relationship "    placeholder="请输入人数">
                    <el-option v-for="(item,index) in item.hrmEmployeerelationshipdata" :key="index" :label="item.value" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item >
                  <el-input   class="add_people_value " style="width:300px;"  v-model="item.hrmEmployeeIdentitycard "  placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item >
                  <el-col :span="22" >
                    <el-date-picker  class="add_people_value " value-format="yyyy-MM-dd"  v-model="item.hrmEmployeeBirthday " type="date" placeholder="请选择"   style="width: 100%;"></el-date-picker>
                  </el-col>
                </el-form-item>
              </div>

            </el-form>
          </div>
        </div>

js logic part

 // 得焦事件
    focustext(){
      this.PepoleNumber = []
    },
    // 回车事件
    searchAllCompany(){
      console.log('回车事件')
      let Number = this.PepNumber
      for(let i = 0 ;i<Number;i++){
      console.log('wwwwww')
      console.log(i)
      let obj ={
          hrmEmployeeName:'',
          hrmEmployeeSex:'',
          index:'',
          relationship:'',
          hrmEmployeeIdentitycard:'',
          hrmEmployeeBirthday:'',
          hrmEmployeeSexdata:[
            {
              id:'1',
              value:'男'
            },
            {
              id:'2',
              value:'女'
            }
          ],
          hrmEmployeerelationshipdata:[
            {
              id:'1',
              value:'子女'
            },
            {
              id:'2',
              value:'亲友'
            }

          ]
        }
        obj.index = i
      this.PepoleNumber.push(obj)
    }
    // this.PepoleNumber = []
    },