如何在 VueJs 中对值求和答案

【问题标题】：How to sum values in VueJs如何在 VueJs 中对值求和
【发布时间】：2020-04-10 03:20:33
【问题描述】：

有人可以帮我计算 VueJs 中的总和值吗我试图得到一个产品的总和我的所有产品都显示在 v-for 的选择选项标签中我在点击时添加事件，之后我在方法中获取价格值如果有人有关于解决这个问题的信息，我很感激

这是我在 Vue 组件中的代码

<div class="form-group row">
  <label class="typo__label col-sm-3 col-form-label">Продукты</label>
  <div class="col-sm-9">
    <multiselect selectLabel="Выбрать" deselectLabel="Удалить" selectedLabel="Выбрано" @input="setSelected"
      :taggable="true" v-model="formData.products" :options="this.$store.state.order.products" :multiple="true"
      :hideSelected="true" :custom-label="titleWithPrice" :close-on-select="false" :clear-on-select="false"
      :preserve-search="true" placeholder="Выберите продукты" label="title" track-by="id" :preselect-first="true">
      <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single"
          v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span></template>
    </multiselect>
  </div>
</div>

这是我在方法中的代码

setSelected(value) {
            let prices = value;
            prices.forEach((price) => {
                this.price = price.price
            })
        }

这是我的计算代码

 totalItem: function(){
            let sum = 0;
            this.items.forEach(function(item) {
                sum += (parseFloat(item.price));
            });

            return sum;
        }

【问题讨论】：

setSelected 方法工作正常吗？
在 vue 中使用计算属性进行这种计算

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

如果formData.products 正确设置了选定的值，那么您可以直接从计算部分获取值的总和。

computed:{
  sum : function(){
    let products = this.formData.products;
    return products.reduce((a,b)=>{
      return parseFloat(a.price) + parseFloat(b.price);
    })
  }
}

【讨论】：