Question

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

而不是将每个项目的成本加在一起。看起来这些值正在连接起来。因此，如果第一项的成本为0.76而第二项的成本为2.18，则结果为＆＃34; 00.762.18＆＃34;。您可以在此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);                                          
      }      
    }
  }
})

我不明白为什么会这样。您可以通过单击＆＃34;设置项目成本＆＃34;重复查看它。按钮。就像Vue将总数视为字符串一样，但是，如updateTotal函数所示，我将其设置为数字。即使使用数字初始化total，它仍然会将其视为字符串。我做错了什么？

Answer 1

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

如果您希望将item.cost作为数值，则可以使用unary plus，如下所示：

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

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

1 个答案: