vue文本输入框v-model双向绑定手动赋值后文本框中数据不实时显示的问题

项目中遇到一个问题,使用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-input
                  v-model="form.binLocationBarcode"
                  placeholder="请输入库位码"
                  style="width: 80%"
                  clearable
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>

手工赋值后,对象的值并没有实时显示在文本框中

// 手工给对象属性赋值,但是输入框中并没有实时显示,
// 而是进行了其他操作后才显示文本框中的赋值数据
  this.form.locationName = res.data.newBinLocationName
  this.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)

你可能感兴趣的:(VUE,vue.js,javascript,前端)