Estoy usando la entrada de moneda Vue para una entrada en la aplicación en la que estoy trabajando, no estoy seguro de por qué tengo este problema extraño cuando el accesorio anterior regresa aunque no se haya activado ningún cambio. El comportamiento es el siguiente: edito el precio y lo guardo, pero cuando hago clic para volver a editarlo, aparece el precio anterior.
Este es mi código:
<template> <div> <input ref="input" :value="val" v-currency="options" allow-negative="false" class="editableValue" @change="change" @keydown.enter.prevent> </div> </template> <script> import { parse } from "vue-currency-input"; import { UTILS } from "@/helpers/utils.js"; export default { name: "EditableValue", data(){ return { val: this.value } }, props: { currency: { type: Object }, value: { type: Number } }, computed: { options() { return { autoDecimalMode: true, currency: {prefix: this.currency.currency + " "}, distractionFree: false }; }, }, methods: { change(){ console.log('chamou') let newValue = parse(this.$refs.input.value, this.options); this.val = newValue; this.$emit('finishEditPrice', newValue) }, }, watch: { value(current) { let inputValue = this.$refs.input.value; let formattedValue = UTILS.getFormattedPrice(current, this.currency); if (inputValue != formattedValue) { this.val = formattedValue; this.$refs.input.value = formattedValue; } }, }, updated(){ // if (inputValue != formattedValue) { // this.val = formattedValue; // this.$refs.input.value = formattedValue; // } } }; </script>
La actualización () y el reloj fueron una prueba para cambiar este comportamiento, pero no hubo suerte. Estoy usando esta versión "vue-currency-input": "^1.22.6". ¿Alguien tiene alguna idea de cómo solucionarlo? ¡Gracias!