toFixed() a large number in a template VueJS

Question

I display a reward which is a number with 9 decimals (must stay like this for the calculation)

But I would like to display only 4 decimal

My using a template in VueJS

<template>
<div class="mb-2">Reward: {{ myAcccount.reward.accrued.toFixed(4) * (10 ** -9) - appAcccount.reward.paid.toFixed(4) * (10 ** -9)}}</div>
  </template>

But I cant applied toFixed() like this, do you know a way to do that directly in the template?

Currently it diplay:

Reward: 0.0022680540000000003

So I would like

Reward: 0.0022

Answer 1

toFixed() is returning a string and not a number. For better readability I would extract the logic in an own function aswell

EDIT: added Math instead of toFixed you could write a function which transform your number into a decimal.

const transformNumber = (number) => {
  return Math.trunc(number * 10000)/10000;
}

and like mentioned a computed property:

computed: {
  reward(): {
    return transformNumber(myAcccount.reward.accrued) * (10 ** -9) - transformNumber(appAcccount.reward.paid) * (10 ** -9)
  }
}

Answer 2

You can try applying.toFixed() to the end of the calculation by enclosing the math part inside ().

<div class="mb-2">Reward: {{ (myAcccount.reward.accrued * (10 ** -9) - appAcccount.reward.paid * (10 ** -9)).toFixed(4)}}</div>