JSFiddle - React, Tailwind, and code Playground

by xie shine

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="100px" class="demo-dynamic">
        <el-form-item
                v-for="(domain, index) in dynamicValidateForm.domains"
                :label="'域名' + index"
                :key="domain.key"
                :prop="'domains.' + index + '.value'"
                :rules="{
      required: domain.required, message: '域名不能为空', trigger: 'blur'
    }">
            <el-input v-model="domain.value"></el-input>
        </el-form-item>
    </el-form>
</div>

CSS

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

JavaScript

new Vue({
        el:'#app',
        data() {
            return {
                dynamicValidateForm: {
                    domains: [
                        {value: '',required: true},
                        {value: '',required: true},
                        {value: '',required: true},
                        {value: '',required: true},
                    ]
                }
            };
        },
        watch:{
            'dynamicValidateForm.domains':{
                handler(v){
                    let hasValue = v.some(o=>o.value !== '');
                    v.forEach(o=>{
                        o.required = !(hasValue && o.value === '');
                    });
										this.$nextTick(()=>{
                        hasValue && this.$refs.dynamicValidateForm.validate();
                    })
                },
                deep:true
            }
        }
    })