Regular Expression for formatting numbers in Vue2

Question

I am trying to print an integer in Vue2 with commas as thousands separators. For example, I want to show the number 34567 as "34 567". How would I go about doing this?

<v-carousel-item
        v-for="item in RANDOM_PRODUCTS"
        :key="item.id"
    >
 <span
    class="name_item_price"
 >
   {{ item.price[0].replace(/(\d)(?=(\d{3})+$)/g, '$1 ') }}
 </span>
</v-carousel-item>

This option used to work, but now it gives an error on some pages. Error:

Error in render: "TypeError: Cannot read property 'replace' of undefined"

Благая Весть · Accepted Answer · 2021-04-13 11:58:54Z

1

Vue.js allows you to define filters that can be used to apply common text formatting.

<span
    class="name_item_price"
>
    {{ item.price[0] | capitalize }}
</span>

define a filter globally before creating the Vue instance: main.js

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.replace(/(\d)(?=(\d{3})+$)/g, '$1 ')
})

answered Apr 13, 2021 at 11:58

Благая Весть

384 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Regular Expression for formatting numbers in Vue2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related