Vue.js - 连接而不是添加值答案

【问题标题】：Vue.js - Value is concatenated instead of addedVue.js - 连接而不是添加值
【发布时间】：2017-04-27 18:59:11
【问题描述】：

我有一个使用 Vue.js 的应用程序。该应用程序只有一个项目列表。每个项目都有一个价格。我想计算列表中所有项目的总数。该列表可能会更改，并且在某些情况下，将来自 Web 服务。所以，我想使用一个观察者。尽管如此，在计算总数时，还是发生了一些奇怪的事情。

而不是将每个项目的成本加在一起。看起来这些值正在连接。因此，如果第一项的成本为 0.76，第二项的成本为 2.18，则结果为“00.762.18”。您可以在Fiddle 中亲自查看结果。我的 Vue 是这样定义的：

new Vue({
  el: '#myApp',
  data: {
    list: [
      { name: 'Golf Ball', cost: 3.49 },
      { name: 'Tennis Ball', cost: 0.75 }
    ],
    total: 't.b.d'
  },
 watch: {
   list: function() {
     this.updateTotal();
   }
 },  
  methods: {
    updateTotal: function() {
      this.total = 0.0;
      for (var i=0; i<this.list.length; i++) {
        console.log('cost: ' + this.list[i].cost);
        this.total += this.list[i].cost;
      }
      console.log(this.total);
    },

    setCosts: function() {
      for (var i=0; i<this.list.length; i++) {
        var d = Math.floor(Math.random() * 3);
        var c = Math.floor((Math.random() * 99)) / 100;

        var item = this.list[i];
        item.cost = (d + c).toFixed(2);
        Vue.set(this.list, i, item);                                          
      }      
    }
  }
})

我不明白为什么会这样。您可以通过单击“设置项目成本”按钮反复看到它发生的情况。就像 Vue 将总数视为一个字符串，但是，如 updateTotal 函数所示，我将其设置为一个数字。即使total 用数字初始化，它仍然将其视为字符串。我做错了什么？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

在您的 setCosts 方法中调用 toFixed() 会返回一个字符串。所以你要添加两个字符串，这会产生一个串联的字符串。

如果您想将item.cost 用作数值，您可以像这样使用unary plus：

item.cost = +((d + c).toFixed(2));

【讨论】：