税込の計算をした際に変な数字になる

Question

前提・実現したいこと

jsで税込計算を試みたところ変な数字(?)になってしまいます。
例) 300 × 9 = 2,700 (税込 2970.0,000,000,000,005)
これは仕様なのでしょうか？

該当のソースコード

<template>
      <div v-for="(item, i) in items" :key="i">
        <p>
          {{ item.name }} : {{ item.price }} × {{ item.quantity }} =
          {{ item.total | numberWithDelimiter }} 円 (税込
          {{ item.totalTax | numberWithDelimiter }} 円)
        </p>
        <button @click="inc(item)">増やす</button>
        <button @click="dec(item)">減らす</button>
        <button @click="totalClear(item)">クリア</button>
        <p v-bind:class="errorMessageClass" v-show="!canBuy(item)">
          1000円以上からご購入いただけます。
        </p>
      </div>
</template>

<script>
methods: {
    inc(item) {
      if (item.quantity >= 0) {
        item.quantity += 1;
        item.total = item.price * item.quantity
        item.totalTax = item.total * 1.1
      } 
    },
}
</script>

試したこと

mathメソッドは一通り試してみましたが何も変わらず。その他小数点以下は表示しないように指定しても変わらずに表示されてしまいます。

Answer 1

気になるなら toFixed() で調整したら?

小数点が絡んできたら浮動小数点数型扱いになりますからね。
しょうがないね。

Comments

[jkla444]

toFixedも試してはみたのですが変化なしでした...。
もしかして記述の仕方が間違っているかもしれないのですが、

item.totalTax = item.total * 1.1
の下に
item.totalTax.toFixed(0)

は誤りでしょうか？

[jkla444]

すみません、
{{ item.totalTax | numberWithDelimiter }}
を直接
item.totalTax.toFixed(0)
にしたら直りました！

Answer 2

最後に小数点以下を計算

console.log(300*9*1.1);
console.log(300*9*11/10);