Tengo dos entradas que usan la misma función para establecer un nuevo valor como este
<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>tienen diferentes modelos v pero estoy usando la misma función para cambiar sus valores en la propiedad de mis métodos.
onClick(e) { console.log(e.target.value); e.target.value = "dfg"; }La cuestión es que cuando cambio una de las siguientes entradas, obtiene el valor que escribí anteriormente. por ejemplo:
si escribe 'ABC' en la primera entrada
lo reemplaza con 'dfg'
Pero cuando voy a la siguiente entrada y escribo algo como 'HIJ'
la primera entrada obtiene su valor anterior = 'ABC'
Pero debería haberse quedado con 'dfg'
Su problema es que está configurando el valor del elemento y no cambiando el valor de la variable limitada, lo que debería hacer.
entonces cuando vue "actualiza" actualiza la entrada
haz esto en su lugar
<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>y cambia tu función a
onClick(id) { if (id === 2) ownerProps.approver2ExtraCost = "dfg"; if (id === 3) ownerProps.approver3ExtraCost = "dfg"; }idealmente, debería tener esos elementos en una matriz y enviar el índice de lo que desea cambiar