element ui form表单项显隐，校验（不该）触发问题

1.问题描述：如题，切换某个下拉框，控制另一个表单项的显隐，总会触发校验规则，长这样：

 

 

2.解决办法：在表单项上加个key，完美解决问题，代码如下：

<el-form ref="form22" :model="form22" label-width="90px">
        <el-form-item label="活动区域">
          <el-select v-model="form22.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="1"></el-option>
            <el-option label="区域二" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="即时配送1"
          v-if="form22.region == 1"
          :key="1"
          prop="delivery1"
          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
        >
          <el-input v-model="form22.delivery1"></el-input>
        </el-form-item>
        <el-form-item
          label="即时配送2"
          v-if="form22.region == 2"
          :key="2"
          prop="delivery2"
          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
        >
          <el-input v-model="form22.delivery2"></el-input>
        </el-form-item>
      </el-form>