1

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>

1 respuesta 1

1

Se me ocurren por lo menos dos formas, en ambos casos obteniendo el valor de entrada del evento con event.target.value.

1 - Obtener el input con event.target y asignarle el valor directamente, con event.target.value = .... (no estoy seguro que sea una buena práctica).

    new Vue({
      el: '#app',
      data () {
        return {
          taxValue1: 1,
        }
      },
      methods: {
        checkFormatNumber1: function(event) {
          event.target.value = event.target.value.replace(/,/g, ".");
        },
      }
    })
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

    <div id="app">
      
      <input type="text" v-model="taxValue1" v-on:keyup="checkFormatNumber1" />
      
    </div>

2 - Pasar como argumento junto al evento, el nombre de la propiedad que usas como v-model en el input y asignarle el valor con this[propiedad] = ...

    new Vue({
      el: '#app',
      data () {
        return {
          taxValue2: 2,
        }
      },
      methods: {
        checkFormatNumber2: function(event, model) {
          this[model] = event.target.value.replace(/,/g, ".");
        },
      }
    })
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

    <div id="app">
      
      <input type="text" v-model="taxValue2" v-on:keyup="checkFormatNumber2($event, 'taxValue2')" />
      
    </div>

Puedes leer más sobre Manejo de eventos en la documentación.

1
  • Hola! Funcionó perfectamente, desconocía la existencia de "event.target.value" y es justo lo que necesitaba. Gracias!!
    – Murph
    el 29 mar. 2020 a las 23:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.