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">
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">