Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

jhaskell16's avatar

Prevent Inertia data from removing trailing zeros when passing to Vue component

In my controller I am running some services to map data and format specific values to a specific number of decimal points. This includes trailing zeros. But when I pass the data as a prop to Vue through Inertia, the trailing zeros are removed. Example:

// Controller function
public function index(Service $service)
{
  $data = $service->mapData();
  // dd($data) <- this returns a floating point value such as 3.0
  Inertia::render('my-page', [
    'data' => $data
  ];
}

If I dd($data), it will display correctly something like 3.0, notice the trailing zero here. But going to my Vue component and checking Vue Dev Tools, that same prop comes in as 3, an integer. However if the data is not a trailing zero like 3.5, the Vue prop is still 3.5. I'm not sure why there is an inconsistency here.

Is there a way to prevent this or is it a default action that I have to address Vue side? I could convert to a string in the controller, but I'd rather not do that as the values may be used for calculations.

0 likes
4 replies
Sinnbeck's avatar

If you need a certain number of decimals in the presentation part of your app (vue), I would just format it there to ensure the correct structure

data.toFixed(2) //2 decimals 
jhaskell16's avatar

@Sinnbeck This would work, but then I'd have to apply this to every single value on every single page/component. I am currently using a trait as a one stop shop to format the values. It works if the value is something like 4.5, but if its 4.0 the .0 gets lost. I'm just wondering why that is and if it can be prevented

Sinnbeck's avatar

@jhaskell16 because floats always remove un needed zeroes. Same as 1.10000 becomes 1.1. So you will need to format it in laravel if that's where you want to do it. And a string is your best bet.

1 like

Please or to participate in this conversation.