最近在使用Vue完成项目工作时，遇到一个关于v-if刷新的问题来记录一下。
背景：根据绑定的Object进行数据回显，同时用户可以修改属性type和value，value的显示方式随type的修改而改变
问题：用户在修改type时，value显示方式却不刷新
解决方案：在用户修改type后出发事件中，强制刷新组建

 <FormItem  >
                <Row>
                  <Col span="8">
                    <Select v-model="valueType[index][v].type" @on-change="changeType(index, v)" >
                      <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </Col>
                  <Col span="14">
                    <Input v-if="valueType[index][v].type === 'Number'" :key="valueType[index][v].type" v-model.number="valueType[index][v].key" type="number"></Input>
                    <Input v-else-if="valueType[index][v].type === 'Null'" :key="valueType[index][v].type"  v-model="valueType[index][v].key" readonly placeholder="null"></Input>
                    <Select v-else-if="valueType[index][v].type === 'Boolean'" :key="valueType[index][v].type"  v-model="valueType[index][v].key" filterable>
                      <Option :value="'true'" :key="'true'" >true</Option>
                      <Option :value="'false'" :key="'false'" >false</Option>
                    </Select>
                    <Input v-else v-model="valueType[index][v].key" :key="valueType[index][v].type"></Input>
                  </Col>
                </Row>
              </FormItem>

changeType方法：

changeType (index, v) { // 修改数据类型，强制刷新组件，value置空
      this.valueType[index][v].key = ''
      this.$forceUpdate() // 强制刷新组件
    }

效果图：

在修改bgf的type为Number后，其对应value置空，且显示框修改

原因分析：在使用时，由于我将valueType[index][v].type以及valueType[index][v].key绑定给了组件，在修改type值后，虽然v-if应该动态刷新，但是由于数据层次过深，就导致render函数没有自动刷新，因此需要手动刷新组件（v-if也懒?跑太远的活不愿意干？hhhh）