vue中动态添加的表单如何去校验必填

##在项目开发中，我们经常会遇到表单保存的功能，在表单保存前，常常需要做表单必填项的校验，校验通过以后才去发请求保存表单数据。

但是，这个表单如果是动态的，即：可以新增相同的表单。比如这个表单有输入框和下拉框需要校验，点击添加房型，再新增一个相同的表单，同样新的这个表单对应的输入框和下拉框也需要校验。

本文记录一下对应代码写法思路，我们先看一下效果图：

页面实现代码：

    <div v-for="(item, index) in ruleForm.houseList" :key="index">
      <el-form-item
        label="房型名称"
        :prop="`houseList[${index}].houseName`"
        :rules="rules.houseName"
      >
        <el-input v-model="item.houseName" placeholder="请输入房型名称" />
      </el-form-item>
      <el-form-item
        label="房型入住人数"
        placeholder="请选择房型入住人数"
        :prop="`houseList[${index}].peopleNum`"
        :rules="rules.peopleNum"
      >
        <el-select v-model="item.peopleNum">
          <el-option v-for="item in 3" :key="item" :label="item" :value="item"
            >{{ item }}</el-option
          >
        </el-select>
        <!-- <el-input v-model="item.peopleNum" placeholder="请输入房型入住人数" /> -->
      </el-form-item>
      <el-form-item
        label="房型库存"
        :prop="`houseList[${index}].houseNum`"
        :rules="rules.houseNum"
      >
        <el-input v-model="item.houseNum" placeholder="请输入房型库存" />
      </el-form-item>
      <el-divider />
    </div>

必填验证代码如下：

     rules: {
        houseName: {
          required: true,
          message: "请输入房型名称",
          trigger: "change",
        },
        houseNum: {
          required: true,
          message: "请输入房型库存",
          trigger: "change",
        },
        peopleNum: {
          required: true,
          message: "请选择房型入驻人数",
          trigger: "change",
        },
      },