I have this Vue 1 application with a table that has an input for every cell.

The problematic part in particular has 3 fields on a row:

• dx
• sx
• diff

I want that when dx and sx are filled, diff becomes the difference between the two.

To achieve this I set up a watcher for each dx and sx fields that calculates the difference when both corresponding inputs are filled.

'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 
    },

After setting all up I tried changing some values:

• If I enter one character everything works fine
• If I enter a second (or more) characters, suddenly the value of the property becomes null

As you can see from the picture, if I enter 1 it logs the correct value, but if I enter a second value it becomes null. If I delete all the characters but one then it starts working again.

Setting one character in both inputs works as expected, it calculates the difference and places it in the right place.

More characters immediately unsets the variable and empties the field as soon as you unfocus it.

Any ideas?