Use computed data inside for each loop in vue.js

Question

I would live to make use of reactive data changes when using v-model for <input> tags.

Now I want to have a value inside a v-for loop to be updated automatically when v-model is triggered.

What I'm doing wrong here ?

<tr v-for="(service, key) in services" :key="key">
  <td class="left aligned">
    <div class="title" contenteditable="true">{{ service.title }}</div>
    <div class="desc" contenteditable="true">{{ service.description }}</div>
  </td>
  <td class="price">
    <input v-model.number="service.price" type="number" min="0" /> &euro; / day
  </td>
  <td class="quantity">
    <input v-model.number="service.quantity" type="number" min="0" />
  </td>
  <td>
    <div class="total">{{ service.total | currency }} &euro;</div>
    <div class="tva">+{{ service.total | tva(invoice.tax) }} &euro; ({{ invoice.tax }}%)</div>
  </td>
</tr>

Whenever I change the values inside the inputs service.quantity or service.price , they updates automatically, except those values in service.total .

Answer 1

Use a method instead:

export default {
  ...
  methods: {
    getServiceTotal({ price, quantity }) {
      return quantity * price;
    }
  }
  ...
}

And in your template:

<div class="total">{{ getServiceTotal(service) | currency }} &euro;</div>