最近在使用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)

Logo

前往低代码交流专区

更多推荐