项目中遇到一个问题,使用vue双向绑定对象的属性,但是手动给属性赋值后输入框中的数据不实时显示。
场景如下: 选择一条生产线后,自动按顺序生成一个新的库位码,并将新的库位码显示在文本框中,但是将新生成的库位码赋值给文本框时,文本框中并没有实时显示。
<el-row :gutter="24"><el-col :span="24"><el-form-item prop="locationName" label="库位名称:"><el-input v-model="form.locationName" placeholder="请输入名称" style="width: 80%" clearable disabled /></el-form-item></el-col></el-row><el-row :gutter="24"><el-col :span="24"><el-form-item prop="binLocationBarcode" label="库位码:"><el-inputv-model="form.binLocationBarcode"placeholder="请输入库位码"style="width: 80%"clearabledisabled/></el-form-item></el-col></el-row>
手工赋值后,对象的值并没有实时显示在文本框中
// 手工给对象属性赋值,但是输入框中并没有实时显示,// 而是进行了其他操作后才显示文本框中的赋值数据this.form.locationName = res.data.newBinLocationNamethis.form.binLocationBarcode = res.data.newBinLocationBarcode
解决方法:使用$set(object,“prop”,value)方法设置属性的值就显示了
this.$set(this.form, 'locationName', res.data.newBinLocationName)this.$set(this.form, 'binLocationBarcode', res.data.newBinLocationBarcode)