toFixed() a large number in a template VueJS-CodePudding

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 >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

CodePudding user response：

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

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

CodePudding user response：

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)
  }
}