javascript - Vue.js - 值是连接而不是相加

Question

我有一个使用 Vue.js 的应用程序。该应用程序只有一个项目列表。每件商品都有一个价格。我想计算列表中所有项目的总数。该列表可能会发生变化，并且在某些情况下，将来自网络服务。所以，我想使用一个观察者。不过，在计算总数时，奇怪的事情发生了。

而不是将每个项目的成本加在一起。看起来这些值正在串联起来。因此，如果第一个项目的成本为 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 用数字初始化，它仍然将其视为字符串。我做错了什么？

Answer 1

在 setCosts 方法中调用 toFixed() 会返回一个字符串。因此，您要添加两个字符串，从而生成一个连接字符串。

如果您希望将 item.cost 作为数值，则可以使用 unary plus像这样:

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