title: How to use methods function in vue js to give thousand separator in my props
body: <p>im newbie on vue js, i wanna try to give thousand separator on my props price using my methods function called 'thousandSeparator' but i got stuck how to use that.</p>
  <p>i have done to parsing props price but the price not separated with thousand yet. i have props price which is &gt;= 1000. but i wanna render it with separator dot (ex: 1.000, 10.000).
  this is my code</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;card mb-4&quot; style=&quot;width: 18rem&quot;&gt;
      &lt;img :src=&quot;image&quot; class=&quot;card-img-top image&quot; alt=&quot;...&quot; /&gt;
      &lt;div class=&quot;card-body text-start&quot;&gt;
        &lt;h5 class=&quot;card-title title&quot;&gt;{{name}}&lt;/h5&gt;
        &lt;h6 class=&quot;price&quot;&gt;Rp. {{price}}&lt;/h6&gt;
        &lt;p class=&quot;card-text description&quot;&gt;
          {{description}}
        &lt;/p&gt;
        &lt;a href=&quot;#&quot; class=&quot;btn btn-primary d-block button-add-cart&quot;&gt;Add to cart&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  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, '.');
        }
      }
  })
  &lt;/script&gt;
  </code></pre>