vue有时候会碰到输入框无法输入的问题,甚至只有当下一个输入框输入的时候,前一个输入框才会有反应,这往往是因为v-model层级过多,render函数无法自动更新,因此这时候需要我们手动强制刷新。
<el-form :inline="true" :model="searchParam" class="demo-form-inline form">
<el-form-item label="图号:">
<el-input v-model="searchParam.engineer_code" placeholder="请输入图号" @input="handleUpdate($event)"></el-input>
</el-form-item>
<el-form-item label="物料编码:">
<el-input v-model="searchParam.mat_code" placeholder="请输入物料编码" @input="handleUpdate($event)"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchParam.limit = 1, getListData()" size="small">查询</el-button>
<el-button @click="reset()" size="small">重置</el-button>
</el-form-item>
</el-form>
在上述代码中,我们给“图号”和“物料编码”两个输入框添加@input事件,强制刷新输入框的内容:
handleUpdate(e){
this.$forceUpdate();
}
这样,输入框就可以及时响应了。
下拉框有时也会出现同样的问题,我们同样可以添加@change事件对下拉框的内容强制刷新。