0

Gostaria de saber como faço para somar os valores de uma array para aparecer na tela. Exemplo tem uma coluna com valor bruto, que contem o valor bruto de cada componente, queria somar esses valores.

Essa columns, importa de um template data-table os dados do valor bruto

data() {
    return {
      columns: [  name: "valorbruto",
          label: "Valor Bruto",
          field: "valorbruto",
          type: "money",
          width: 4,
          dontbreak: true,
          sortable: true
      },]

Tentei esse código e depois interpolar, porém não funcionou.

Computed: {
    Valores(){
      const ValorBrutoTotal = valorbruto
       .reduce((acc, current) => 
        acc + current, 0);
      return ValorBrutoTotal;

      console.log(ValorBrutoTotal)
    }
  },
2
  • Tente melhorar o seu exemplo. Você quer somar todas as propriedades width? Pergunto isso porque é o único número presente no objeto que você colocou na pergunta. Commented 2/12/2020 às 21:32
  • quero somar o valorbruto, o valorbruto vem do backend trazendo valores, queria saber como faço um computed para eu colocar em tela o resultado geral da array valorbruto Commented 3/12/2020 às 11:54

1 Resposta 1

0

Não entendi bem o seu código, vou propor aqui uma maneira de somar os itens de um array por uma determinada chave e também adicionar novos itens nesse array. Foi utilizado computed para criar uma função que soma os valores de uma determinada chave de nome width, como nesse exemplo:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#editor',
  data: {
    value: 10,
    items: [
      { width: 100 },
      { width: 200 },
      { width: 150 },
      { width: 111 },
    ]
  },
  methods: {
    onSubmit() {
      const width = parseInt(this.value);
      if (width) {
        this.items = [...this.items, { width }];
        this.value = 0;
      }
    }
  },
  computed: {
    total() {
      return this.items.reduce((a, b) => {
        return a + b.width;
      }, 0);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="editor">
    <form v-on:submit.prevent="onSubmit">
      <input type="number" v-model="value" /> 
      <button>Incluir</button>
    </form>
    <ul>
      <li v-for="item in items">{{item.width}}</li>
    </ul>
    <hr />
    <div>
      <i>Somatória:</i> <b>{{total}}</b>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .