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

synadia's avatar

Number formatting vue.js

Number formatting with vue.js

Hi I've got the following vue template:

<template>
    <div class="table-responsive">
        <table class="table table-hover table-condensed no-margin">
            <thead>
                <tr>
                    <th>Time</th>
                    <th class="text-right" colspan="2">Received</th>
                    <th class="text-right" colspan="2">Completed</th>
                    <th class="text-right">%</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableData">
                    <td class="text-light" v-text="createdAtTime(item)"></td>
                    <td class="text-right text-light" v-text="item.created"></td>
                    <td class="text-right" v-text="item.created_cum"></td>
                    <td class="text-right text-light" v-text="item.completed"></td>
                    <td class="text-right" v-text="item.completed_cum"></td>
                    <td class="text-right text-xs" v-text="percentage(item)"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

The created, created_cum, completed, completed_cum are integers that I would like to format with an thousands separator. Does anyone know how I can do number formatting with vue ?

Regards,

Sebas

0 likes
3 replies
jaydeluca's avatar

I haven't tested this within vue, but I have used .toFixed(2) for formatting currency, so I'd assume this would work

item.completed.toLocalString()

Please or to participate in this conversation.