Tengo una duda referente a Vuejs. He hecho un simple ejemplo de generador de facturas y me he encontrado con un detalle que he intentado resolver de mil formas pero no hay manera.
Quiero hacer que cuando se introduzca un valor en el campo "precio" o "impuesto", alguna función revise si se han introducido "," (comas) y que las transforme en "." (puntos). Lo he hecho de la siguiente manera:
En el input he puesto v-on:keyup="checkFormatNumberConcept(item.id)" y este es el método:
checkFormatNumberConcept: function(idConcept) {
valor = this.conceptList[idConcept].value;
this.conceptList[idConcept].value = valor.replace(/,/g, ".");
},
Obviamente funciona, pero la cuestión es que tengo otro campo totalmente diferente en el cual quiero hacer exactamento lo mismo y ahí es donde no sé cómo hacerlo. El otro campo en mi código actual (que os dejo abajo) llama a otro método que hace lo mismo porque no sé cómo crear un único método que permita retornar el valor para un campo y otro, tipo esto:
checkFormatNumber: function(valElem) {
var valElem = valElem.replace(/,/g, ".");
console.log(valElem);
return valElem;
}
En el console.log el valor es correcto, pero no sé cómo retornarlo a cada campo que lo invoca, yo lo hago así
<input type="text" class="form-control" placeholder="IGIC" v-model="taxValue" v-on:keyup="checkFormatNumberTax(this.taxValue)" />
Pero no retorna nunca ningún valor... ¿Alguien sabría hacer esto solo con un método genérico? Gracias!!
PD: Aquí dejo el código completo.
<div id="app" class="container mt-5">
<h2>{{appTitle}}</h2>
<div>
<div
:id="item.id"
v-for="item of conceptList"
class="row col-sm-10 float-left"
>
<div class="form-group col-sm-8">
<input
type="text"
class="form-control"
placeholder="Concepto"
/>
</div>
<div class="form-group col-sm-4">
<input
type="text"
class="form-control"
placeholder="Precio"
v-model="item.value"
v-on:keyup="checkFormatNumberConcept(item.id)"
/>
</div>
</div>
</div>
<button
class="btn btn-primary col-sm-2 float-left"
v-on:click="addConcept"
>
Añadir
</button>
<div class="clearfix"></div>
<hr />
<div class="row col-sm-3 float-right">
<div class="form-group ">
<p style="position:absolute; left:-80px; top:8px;">
Impuestos
</p>
<input
type="text"
class="form-control"
placeholder="IGIC"
v-model="taxValue"
v-on:keyup="checkFormatNumberTax"
/>
</div>
</div>
<div class="clearfix"></div>
<h4 class="text-right">Total: {{calculateTotal}}€</h4>
<p
v-show="isNaN(this.finalPrice) || this.finalPrice === ''"
class="text-right"
>
Error en los valores
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
appTitle: "Generar factura",
conceptList: [
{ id: 0, text: "Campo de prueba", value: "" }
],
finalPrice: 0,
taxValue: 7
},
methods: {
addConcept: function(event) {
this.conceptList.push({
id: this.conceptList.length,
text: "",
value: ""
});
},
checkFormatNumberConcept: function(idConcept) {
valor = this.conceptList[idConcept].value;
this.conceptList[idConcept].value = valor.replace(
/,/g,
"."
);
},
checkFormatNumberTax: function() {
this.taxValue = this.taxValue.replace(/,/g, ".");
}
},
computed: {
calculateTotal: function(event) {
this.finalPrice = 0;
for (item of this.conceptList) {
currentPriceItem = item.value;
if (currentPriceItem == "") {
currentPriceItem = 0;
}
this.finalPrice =
parseFloat(this.finalPrice) +
parseFloat(currentPriceItem);
}
this.finalPrice =
this.finalPrice -
(this.finalPrice * this.taxValue) / 100;
if (!isNaN(this.finalPrice)) {
return this.finalPrice.toFixed(2);
} else {
return 0;
}
}
}
});
</script>