En el proyecto vue, ingrese un número en el cuadro de entrada y agregue la cantidad de objetos correspondientes al número a la matriz

describir

El título no es muy claro. Combinado con las siguientes representaciones, describa esta función aquí. Cuando ingresa un número en el cuadro de entrada, cuántos datos se generarán a continuación (ingrese el número 2 aquí, y se generarán dos datos). se generará a continuación, como se muestra en la figura siguiente (Cada línea en un dato).

idea de realización

1. Vincule el evento de entrada y el evento de enfoque en el cuadro de entrada, y use v-model para vincular una variable PepNumber, que se usa para vincular el valor ingresado en el cuadro de entrada 2. Defina cada dato a continuación como Objeto obj
;
3. Defina una variable PepoleNumber, que es un tipo de matriz;
4. Vincule la variable de tipo de matriz definida en el div más externo de cada dato;
5. Después de ingresar el valor en el cuadro de entrada, presione Presione Enter para activar el evento Enter En el evento Enter, el objeto obj se empuja a la matriz PepoleNumber haciendo un bucle con PepNumber;
6. Cuando el cuadro de entrada obtiene el foco nuevamente, se activa el evento Focus. En este evento, la matriz PepoleNumber se borra;

Problema: Aquí hay un pequeño defecto. Solo después de ingresar un valor en el cuadro de entrada, presionar Enter, luego perder el foco y luego obtener el foco, se puede borrar la matriz PepoleNumber. Si ingresa un valor y presiona Enter, en este time No está desenfocado, ingrese el valor nuevamente y luego presione Enter, se agregará un dato a la matriz original y la matriz original de la matriz no se borrará

parte del código

parte html

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

parte lógica js

 // 得焦事件
    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 = []
    },