I am currently learning Vue.js and I have implemented a v-for loop to iterate through an array of objects. However, I now need to calculate a specific field (precoPorKg) within this loop.
In order to perform this calculation, the input item.quantidade must contain a value. Once that is done, I will use the following formula:
(item.quantidade * item.valorUnitario)/( item.quantidade * item.pesoUnitario)This is how my v-for looks:
<tr v-for="(item, index) in step2">
<td>{{ item.produto }}</td>
<td><input type="text" v-model="item.quantidade"></td>
<td>{{ item.valorUnitario }}</td>
<td>{{ item.pesoUnitario }}</td>
<td>{{ item.cubagemUnitaria }}</td>
<td>{{ calcPrecoPorKg(index, item) }}</td>
</tr>Here is my Vue component (I've attempted to handle the operation within 'computed', but it's not working as intended):
new Vue({
el: '#app',
data(){
step2 : [
{
produto: 'A70-5',
descricao: 'basketball',
ncm: '950.6',
quantidade: '',
valorUnitario: '0.78',
pesoUnitario: '0.430',
cubagemUnitaria: '0.00',
precoPorKg: '',
}
],
computed: {
calcPrecoPorKg: function (index, item) {
return (item.quantidade * item.valorUnitario)/( item.quantidade * item.pesoUnitario);
}
}
})