Use static value while v-model is changing it-CodePudding

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 >
        <label >@{{ product.upc }}</label>
   </div>
   <input type="text"  v-model="product.upc">

CodePudding user response：

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 >
  <label >@{{ label }}</label>
</div>
<input type="text"  v-model="product.upc">