问题:
今天写elementUI时,发现之前下拉选择框正常在刚刚选择了一个项后,label无法正常显示,但是select绑定的值却可以正确变化
代码段:
<el-select v-model="model.flowerId">
<el-option
v-for="flower in flowerInfo"
:key="flower.id"
:label="flower.name"
:value="flower.id"
></el-option>
</el-select>
选择后选择框还是显示请选择
解决办法:
<el-select v-model="model.flowerId" @change="change">
<el-option
v-for="flower in flowerInfo"
:key="flower.id"
:label="flower.name"
:value="flower.id"
></el-option>
</el-select>
在select中 加入 @change=‘change’
change(){
this.$forceUpdate();
//完美解决
}
出现问题原因:
出现这个问题好像是因为下拉框数据是循环掉别的接口得来的,因为数据层次太多,render函数没有自动更新,需手动强制刷新所以我直接强制刷新了值,而forceUpdate就是重新render。
写一个方法,在select的change事件中调用此方法,运用 this.$forceUpdate()强制刷新,页面正常选值。
forceUpdate()方法
forceUpdate()这个方法也适用一些很深的组件 state 已经改变了的时候,可以在该组件上面调用,解决页面v-for中修改item属性值后页面页面值不改变的问题。