Vue中如何在v-model修改product.upc时让label显示静态初始值？

• 核心思路：把product.upc的静态初始值单独存一份独立变量，让label绑定这个变量，和input的双向绑定变量彻底分离，避免同步更新。
• 具体实现步骤：
  1. 在组件初始化阶段（比如created钩子），将product.upc的初始值复制到新的实例变量（例如originalUpc）
  2. 修改label的绑定目标为这个新变量
  3. input保持原有的v-model="product.upc"双向绑定逻辑

修改后的模板代码 #

<div class="input-group-prepend">
    <label class="input-group-text p-0">@{{ originalUpc }}</label>
</div>
<input type="text" class="form-control text-center" v-model="product.upc">

对应的Vue实例逻辑（选项式API） #

export default {
  data() {
    return {
      product: { upc: '你的初始UPC值' }, // 假设为接口返回或props传入的初始数据
      originalUpc: ''
    }
  },
  created() {
    // 直接赋值字符串类型的初始值，若为复杂类型需用深拷贝（如JSON.parse(JSON.stringify(...))）
    this.originalUpc = this.product.upc
  }
}

注意事项 #

• 如果product是父组件传入的props，务必在组件初始化时保存初始值，避免父组件后续更新影响静态显示的初始值
• 若product.upc是引用类型（如对象），必须使用深拷贝来切断引用关联，防止修改input时同步影响初始值变量

内容的提问来源于stack exchange，提问作者Michu