I have two inputs that use the same function to set a new value like this
<b-input
v-model="ownerProps.approver2ExtraCost"
@blur="onClick($event)"
class="inputBuefy"
></b-input>
</div>
<b-input
class="inputBuefy"
@blur="onClick($event)"
v-model="ownerProps.approver3ExtraCost"
></b-input>
</div>
they have different v-models but I'm using the same function to change their values on my methods property.
onClick(e) {
console.log(e.target.value);
e.target.value = "dfg";
}
The thing is, when I change one of the following inputs it gets the previously value that I typed. for example:
if typed 'ABC' in the first input
replaces it with 'dfg'
But when I go to the next input, and I type something like 'HIJ'
the first input get its previous value = 'ABC'
But it should have remained with 'dfg'
Your problem is that you are setting the value of the element and not changing the value of the bounded variable which you should do.
so when vue "refreshes" it updates the input
do this instead
<b-input
v-model="ownerProps.approver2ExtraCost"
@blur="onClick(2)"
class="inputBuefy"
></b-input>
</div>
<b-input
class="inputBuefy"
@blur="onClick(3)"
v-model="ownerProps.approver3ExtraCost"
></b-input>
</div>
and change your function to
onClick(id) {
if (id === 2) ownerProps.approver2ExtraCost = "dfg";
if (id === 3) ownerProps.approver3ExtraCost = "dfg";
}
you should ideally have those elements in a array instead and send the index of what you want to change