vue2-----校验动态添加的表单

vue2-----校验动态添加的表单

表单结构:prop="'domains.' + index + '.value'"

 <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          v-for="(item, index) in form.domains"
          :key="item.key"
          :label="'姓名 ' + (index + 1)"
          :prop="'domains.' + index + '.value'"
          :rules="rules.domains"
        >
          <el-input v-model="item.value" class="check-form"> </el-input
          ><el-button @click="del(item)">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-form>

数据结构

form: {
        domains: [
          {
            value: '',
          },
        ],
      },
      rules: {
        domains: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: ['blur', 'change'],
          },
        ],
      },

新增和删除

 methods: {
    // 删除
    del(item) {
      const { domains } = this.form
      const index = domains.indexOf(item)
      if (index !== -1) {
        domains.splice(index, 1)
      }
    },
    // 新增
    add() {
      this.form.domains.push({
        value: '',
        key: Date.now(),
      })
    },
  },