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

最新推荐文章于 2025-02-25 16:25:36 发布

weixin_45616483

最新推荐文章于 2025-02-25 16:25:36 发布

阅读量2.7k

点赞数 2

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45616483/article/details/128835153

版权

VUE 专栏收录该内容

16 篇文章

订阅专栏

在Vue项目中遇到v-model双向绑定对象属性时，手动赋值后文本框未实时显示新值。问题出现在给对象属性赋值后，文本框内容未更新。解决方案是利用Vue的$set方法来设置属性的值，确保视图同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中遇到一个问题，使用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)