vue プロジェクトで、入力ボックスに数値を入力し、その数値に対応する数のオブジェクトを配列に追加します。

説明する

タイトルがわかりにくいです。以下のレンダリングと組み合わせて、ここにこの関数を説明します。入力ボックスに数値を入力すると、下にいくつのデータが生成されます (ここに数値 2 を入力すると、2 つのデータが生成されます)以下の図に示すように、データの各行が生成されます)。

実現アイデア

1. 入力ボックスで Enter イベントと focus イベントをバインドし、v-model を使用して変数 PepNumber をバインドし、これは入力ボックスに入力された値をバインドするために使用されます; 2. 以下の各データを Object obj として定義します
。
3. 配列型である変数 PepoleNumber を定義します;
4. 定義された配列型変数を各データの最も外側の div にバインドします;
5. 入力ボックスに値を入力した後、Enter キーを押して Enter イベントをトリガーしますEnter イベントでは、PepNumber をループすることによって、オブジェクト obj が配列 PepoleNumber にプッシュされます;
6. 入力ボックスが再びフォーカスを取得すると、Focus イベントがトリガーされます。このイベントでは、配列 PepoleNumber がクリアされます。

問題: ここには小さな欠点があります。入力ボックスに値を入力して Enter キーを押し、その後フォーカスを失い、その後フォーカスを取得した後でのみ、PepoleNumber 配列をクリアできます。値を入力して Enter キーを押すと、この時点で時間 フォーカスが外れていません。値を再度入力して Enter キーを押します。データの一部が元の配列に追加され、配列の元の配列はクリアされません。

コード部分

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>

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 = []
    },