calculate some fields in array of objects from v-for with vue.js

Question

I'm new with Vue.js and i'm using a v-for to iterate an array of objects, but i need to calculate a single field (precoPorKg) in this v-for.

to calculate this i need that input item.quantidade had some value and after this, i need to make this operation:

(item.quantidade * item.valorUnitario)/( item.quantidade * item.pesoUnitario)

My v-for:

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

my vue component (i'm trying to make this operation in computed, but doesn't work):

   new Vue({
                el: '#app', 
                data(){
                step2 : [
                  {
                    produto: 'A70-5',
                    descricao: 'bola de basquete',
                    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);
                     }
                }

    })

Try making this a method rather than computed property and it should work — Himanshu
– Himanshu, Commented May 17, 2020 at 0:35

Renaud · Accepted Answer · 2020-05-17 01:03:07Z

2

computed properties do not take any parameters. What you need is just a method.

methods: {
  calcPrecoPorKg(item) {
    return (item.quantidade * item.valorUnitario)/( item.quantidade * item.pesoUnitario);
  }
}

answered May 17, 2020 at 1:03

Renaud

1,3098 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matheus Barem Over a year ago

thank you, i changed to method and i was using wrong values to the operation, i correct this and it works! thanks

Collectives™ on Stack Overflow

calculate some fields in array of objects from v-for with vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related