How, when entering a value into an input, substitute a new value into the adjacent one?

Question

Vue.js

<td><input type="text" class="form-control"  v-model="result[product.id]" /></td>
 <td>{{product.unit}}</td>
 <td><input type="text" class="form-control"  v-model="price[product.id]" v-on:keyup="priceChange" :product_id="product.id"  /></td>
 <td><input type="text" class="form-control" v-model="sum[product.id]"  /></td>

methods: {
     priceChange: function(){
      let product_id=event.target.getAttribute('product_id');
      let price=this.price[product_id];
      let count=this.result[product_id];
      let sumres=price*count;
      console.log(sumres);
      this.sum[product_id]=sumres;
    }
  },

It is displayed in the console immediately, when submitting the form I also see it, but in the interface only after 2 clicks on the keyboard.
How to do from 1 time, so that the value in sum is substituted from the calculation?

Answer 1

Remove keyup event handling and product_id attribute binding; cut priceChange method.
Replace v-model="sum[product.id]"with :value="sum[product.id]" readonly.
Make the sum property calculable:

sum() {
  return Object.fromEntries(Object.entries(this.price).map(n => ([
    n[0],
    (this.result[n[0]] || 0) * n[1],
  ])));
},