JSFiddle - React, Tailwind, and code Playground

by Theara Yuom

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
  
  <template v-for="(item, index) in dynamicValidateForm.items">
  <el-form-item :label="'Item' + index" :key="item.name" :prop="'items.' + index + '.name'" :rules="{ validator: checkName, trigger: 'blur' }">
    <el-input v-model="item.name"></el-input>
  </el-form-item>
  <el-form-item :label="'Qty' + index" :prop="'items.' + index + '.qty'" :rules="{ validator: checkQty, trigger: 'blur' }">
    <el-input v-model="item.qty"></el-input><el-button @click.prevent="removeDomain(item)">Delete</el-button>
  </el-form-item>
  </template>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
    <el-button @click="addDomain">New domain</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
  </el-form-item>
</el-form>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

Babel + JSX

var Main = {
    data() {
     var checkAge = (rule, value, callback) => {
     		console.log(rule, value)
        /* if (!value) {
          return callback(new Error('Please input the age'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('Please input digits'));
          } else {
            if (value < 18) {
              callback(new Error('Age must be greater than 18'));
            } else {
              callback();
            }
          }
        }, 1000); */
      };
      
      return {
        dynamicValidateForm: {
          items: [{
            name: '',
            qty: 1
          }],
        },
        
      };
    },
    methods: {
    	checkName (rule, value, callback) {
      	console.log(rule, value)
/*         if (!value) {
          return callback(new Error('Please input the age'));
        }else{
          callback();
                }
         */      },
    	checkQty (rule, value, callback) {
      	console.log(rule, value)
        let index = 0
        if(this.dynamicValidateForm.items[index].name){
          if (!value) {
            return callback(new Error('Please input the age'));
          }else{
            callback();
          }        
        }else{
        	callback();
        }
      },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item);
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1);
        }
      },
      addDomain() {
        this.dynamicValidateForm.items.push({
          name: '',
          qty: 1
        });
      }
    }
  }
var Ctor...