在VUE中使用<el-input>或者<el-select>组件时,会出现莫名其妙的无响应、无法输入、不能输入的奇怪状态。具体表现为el-select选择后界面不更新,el-input无法输入或输入无反应,向被禁用一样,经过查询后发现,主要由两种解释,我发现只有一种方法有效,就是官方文档的说法,不过也需要注意一点:初始值很关键。
例如,一个页面的弹出窗口,如果弹窗使用了el-select或el-input组件,但组件绑定的变量如果在页面data()时没有正确初始化,那么弹出界面后,初始化也是无法改变无法选择或无法输入的问题。
虽然通过 **@change="$forceUpdate()"**可以解决select问题,不过依然无法解决el-input的问题,至少我的代码是无法解决的。
真正解决的方法是,在data()函数内老实返回需要使用的模型所有变量。
例如弹窗绑定的模型为xxxForm.version,那么在data()中的实现为:
<script>
data(){
return {
xxxForm:{version:''}
}
}
</script>
我的教训是:如果也为弹窗可以后面初始化,实际不是,因为弹窗的目标在页面价值的时候已经初始化完成了,只是没有显示出来而已。
参考资料:https://blog.csdn.net/weixin_45883730/article/details/108779686