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