problem description

E-commerce project, the front-end frame uses vue, to display the price in the shopping cart using the calculation property of vue, which is used to calculate the total price of the shopping cart. However, when the commodity price is 1.01 yuan, the calculation result will appear periodic digit anomaly.

related codes

goodsInform stores information about items stored in the shopping cart
price item unit price
quantity of the same item in the amount shopping cart

totalPrices () {
      let totalPrices = 0
      for (let index in this.goodsInform) {
        console.log(this.goodsInform[index].price) // 
        console.log(this.goodsInform[index].amount) // 
        totalPrices += this.goodsInform[index].price * this.goodsInform[index].amount
        // ,,
      }
      totalPrices = totalPrices.toFixed(2)
      if (totalPrices <= 0) {
        return ""
      } else {
        return ":" + "" + totalPrices
      }
    }

screenshots of related error results and data information

1. The commodity data is transmitted by Java backend. The backend says that he uses BigDecima type data. What is sent to me is the unit price and quantity of Number type.
2. The law of error: the quantity of goods at 1.01 yuan is 3pm, 6pm, 12pm, 24.
will be displayed as similar data such as 6.0600000000000005.
console print result and display result:

although the solution I use at present does not affect the display, the emergence of this problem is very difficult for me to understand. I want to know why this happens and how to avoid this error.