在做一个新增编辑的功能时,共用了一个dialog弹出层,弹出层中有一个选择框如图
新增的时候没有问题,可以切换选中不同的选项,但是编辑的时候,出现了无法切换的问题,增加change事件,发现值是变化的,页面就是没变化,应该是没有渲染导致。
最终通过一系列查找,发现是框架有问题,解决方案如下:
//在select框中的change事件中,加一段代码,强制重新渲染 @change="$forceUpdate()"。 <el-select v-model="form.channel_code" clearable filterable class="filter-item" placeholder="请选择" style="width: 110px;" @change="$forceUpdate()" > <el-option v-for="item in channelCodeList" :key="item.channel" :label="item.channel" :value="item.channel" /> </el-select>
$forceUpdate() 在页面初始化的时候,也可以加一下这个。
最终问题解决了,也可以有效的切换选项了。
this.$forceUpdate()
是 Vue.js 框架中的一个实例方法,用于强制 Vue 实例重新渲染。在大多数情况下,Vue 的响应式系统会自动跟踪依赖并更新 DOM,但是当你在 Vue 组件中直接修改了由 Vue 管理的状态之外的数据(比如直接修改了数组索引、或使用了 Object.assign() 等方法修改了对象的属性,而这些修改没有被 Vue 的响应式系统捕获时),你可能需要手动通知 Vue 重新渲染组件。
使用场景
- 直接修改了响应式数据但 Vue 没有检测到:如上所述,当你直接修改了响应式数据(如数组索引或深层嵌套的对象属性),而这些修改没有被 Vue 的响应式系统捕获时,可以使用
this.$forceUpdate()
来强制 Vue 重新渲染组件。 - 优化渲染性能时慎用:虽然
this.$forceUpdate()
可以强制组件重新渲染,但滥用它可能会导致性能问题,因为它会跳过 Vue 的虚拟 DOM 比较和最小更新算法,直接进行 DOM 的更新。