Tengo esta aplicación Vue 1 con una tabla que tiene una entrada para cada celda.

La parte problemática en particular tiene 3 campos seguidos:

• dx
• sx
• diferencia

Quiero que cuando se llenen dx y sx , diff se convierta en la diferencia entre los dos.

Para lograr esto, configuré un observador para cada campo dx y sx que calcula la diferencia cuando se llenan ambas entradas correspondientes.

 'athlete.inputs[testData.edf.abdother.dx.id].comment': function(){ this.calcDiff('abdother.dx.id') }, 'athlete.inputs[testData.edf.abdother.sx.id].comment': function(){ this.calcDiff('abdother.sx.id') }, ...

 calcDiff: function(input){ console.log('calculating diff', this.athlete); input = input.split('.') var dx = this.athlete.inputs[this.testData.edf[input[0]]['dx'][input[2]]].comment var sx = this.athlete.inputs[this.testData.edf[input[0]]['sx'][input[2]]].comment console.log({dx, sx}) if (!dx || !sx) return; this.athlete.inputs[this.testData.edf[input[0]]['diff'][input[2]]].comment = dx >= sx ? dx - sx : sx - dx },

Después de configurar todo, intenté cambiar algunos valores:

• Si ingreso un carácter todo funciona bien
• Si ingreso un segundo (o más) caracteres, de repente el valor de la propiedad se vuelve nulo

Como puede ver en la imagen, si ingreso 1, registra el valor correcto, pero si ingreso un segundo valor, se vuelve nulo. Si elimino todos los caracteres menos uno, vuelve a funcionar.

Establecer un carácter en ambas entradas funciona como se esperaba, calcula la diferencia y lo coloca en el lugar correcto.

Más caracteres desarma inmediatamente la variable y vacía el campo tan pronto como lo desenfoca.

¿Algunas ideas?