Vue中计算数组对象属性和时加法失效乘法正常如何解决？

问题根因 #

这是JavaScript数据类型隐式转换的特性导致的：

• 乘法运算符*执行时会自动将两侧的操作数转为数字类型，所以哪怕你存储的select_method、select_innovation是字符串格式的数值（比如"6"、"2"），乘法计算也能得到正确结果
• 加法运算符+如果遇到字符串类型的操作数，会优先执行字符串拼接逻辑，比如"6"+"2"得到的是"62"而非预期的数字8，就会出现不符合预期的结果

解决代码 #

修改后的subtotalRow计算属性写法如下，将两个字段单独转成数字后再相加即可：

subtotalRow() {
    return this.$store.state.item_tabel.map((item,i) => {
      return Number(item.method.select_method) + Number(item.innovation.select_innovation)
     });
 },

优化建议 #

如果要从根源避免这类问题，可以在往Vuex存储item_tabel数据的时候，就提前把select_method和select_innovation两个字段转成数字类型，后续计算就不用每次单独做类型转换。

内容的提问来源于stack exchange，提问作者Gusti