vue+elementui 实现动态必填表单项操作

实现表单项动态必填功能，目前看到方法有两种
1.在必填的el-form-item 写两个一样的，一个有rules一个没，然后用v-if去动态判断
2.现在要说的是方法2，大部分网上看的都是用方法一的方式，而且基本都copy的文章
1）首先在data()数据定义中先定义个布尔值

isIpv4:true, //是否是必填项

2)在html页面部分写动态的rules

<el-form-item label="封堵IP" prop="oip" :rules="[{required:isIpv4,message:'请输入封堵IP',trigger:'blur'}]">

3)在js部分凡是有用到isIpv4的地方全部加一个$nextTick方法

ipProtocolChange(val){
            this.$nextTick(()=>{
                if(val == 1){
                    this.isIpv4 = true;
                }else if(val == 2){
                    this.isIpv4 = false;
                    this.$refs['plugParamsFormRef'].clearValidate();
                }
            });
            
        },

上面这个方法是下拉操作动态改变页面是否校验的功能。
方法2的重点在于使用$nextTick去更新dom