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/[email protected]"></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/[email protected]"></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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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