How to calculate two input values and put the result in another input field in Vue,js?

Question

Here are my input fields:

Answer 1

I needed to operate several rows and had problems with the index of each control, this example helped me a lot to solve this problem

HTML

  
Quantity
  
Price
  
Subtotal


    

      

      

      

      
+
      
-
   
   

     
Total
     
{{total}}
   
 
 
 

JavaScript (vue.js)

var app = new Vue({
el: '#app',
  data: {
    // dummy data
    items: [
    {qty: 5, price: 25 },
    {qty: 2, price: 16 },
    {qty: 8, price: 320 },
    {qty: 3, price: 88 }
    ],
  },
  computed: {
    subtotalRow() {
      return this.items.map((item) => {
        return Number(item.qty * item.price)
      });
    },
    total() {
      return this.items.reduce((total, item) => {
        return total + item.qty * item.price;
      }, 0);
    }
},
methods: {
    addRow(index) {
        this.items.splice(index + 1, 0, {
        qty: 1,  price: 0
        });
    },
    removeRow(index) {
        this.items.splice(index, 1);
    }
  }  
});

See the example in https://jsfiddle.net/h5swdfv5/1/

Answer by smarx https://stackoverflow.com/a/45425666/4191716