As a beginner in Vue.js, I am trying to add a thousand separator to the price passed as a prop using a method called 'thousandSeparator'. However, I am having trouble figuring out how to implement this.
I have managed to parse the props price, but it is not separated by thousands yet. The price I receive is greater than or equal to 1000, and I want to display it with dot separators (e.g., 1.000, 10.000).
<template>
<div class="card mb-4" style="width: 18rem">
<img :src="image" class="card-img-top image" alt="..." />
<div class="card-body text-start">
<h5 class="card-title title">{{name}}</h5>
<h6 class="price">Rp. {{thousandSeparator(price)}}</h6>
<p class="card-text description">
{{description}}
</p>
<a href="#" class="btn btn-primary d-block button-add-cart">Add to cart</a>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Card',
props: ['name', 'price', 'description', 'image'],
methods: {
thousandSeparator(price: number) {
return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}
}
})
</script>