javascript - 在 vue.js 中的每个循环中使用计算数据

Question

我希望在使用 v-model 时能够利用响应式(Reactive)数据更改对于 <input>标签。

现在我想在 v-for 中有一个值循环在 v-model 时自动更新被触发。

我在这里做错了什么？

<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>

每当我更改 inputs 内的值时service.quantity或service.price ，它们会自动更新，但 service.total 中的值除外.

Answer 1

使用方法代替:

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

在你的模板中:

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