Use static value while v-model is changing it

Question

I need to show 'product.upc' in label tag without change (static, the same value always) while v-model is changing the value by input.

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

Answer 1

v-model is a two-way binding that will surely update wherever it is being used, so use another variable for your label instead.

For example, on the mounted hook, you can set the initial value of product.upc in another data variable and use that as your label.

On Js side-

data() {
  return {
    label: null,
    product: {
      upc: "something",
    }
  }
},
mounted() {
  this.label = product.upc
}

On the template side-

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