[英]Use computed data inside for each loop in vue.js
I would live to make use of reactive data changes when using v-model
for <input>
tags. 当对
<input>
标签使用v-model
时,我会充分利用反应性数据更改。
Now I want to have a value inside a v-for
loop to be updated automatically when v-model
is triggered. 现在,我想在
v-for
循环中具有一个值v-for
以在触发v-model
时自动更新。
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" /> € / day
</td>
<td class="quantity">
<input v-model.number="service.quantity" type="number" min="0" />
</td>
<td>
<div class="total">{{ service.total | currency }} €</div>
<div class="tva">+{{ service.total | tva(invoice.tax) }} € ({{ 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
. 每当我更改
inputs
service.quantity
或service.price
内部的值时,它们都会自动更新,但service.total
值除外。
Use a method instead: 改用一种方法:
export default {
...
methods: {
getServiceTotal({ price, quantity }) {
return quantity * price;
}
}
...
}
And in your template: 在您的模板中:
<div class="total">{{ getServiceTotal(service) | currency }} €</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.