element的el-select input组件双向绑定无法选中回显的问题

在选择下拉后出现了下拉无法回显的情况,但是其他输入框一填内容,马上就回显了的情况。

经过排查也并不是下拉框绑定的值有问题,最后是使用了Vue 官方提供了 vm.$forceUpdate() 方法才解决的。
此方法的作用是迫使 Vue 实例重新渲染。

解决代码:
在对应的select组件增加@change事件,在对应的input组件增加@input事件,事件对应为$forceUpdate()即可

                <el-select
                  v-model="ruleForm"
                  placeholder="请选择"
                  clearable
                  @change="$forceUpdate()"
                >
                  <el-option
                    v-for="item in Options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>

 

 

参考链接:https://blog.csdn.net/d_append/article/details/107262018

posted @ 2021-12-04 10:07  肥晨  阅读(1124)  评论(0编辑  收藏  举报