Pada catatan kali ini ialah Bagaimana cara mengubah jumlah atau angka menjadi nilai mata uang pada VueJS menggunakan Vue Currency Filter, katakanlah kita memiliki angka seperti 10000, dan itu mewakili harga sesuatu dan ingin mengubahnya menjadi Rp. 10.000
Jika angkanya lebih dari 5 digit, namun harus ditampilkan berbeda, misalnya 100000 harus ditampilkan sebagai Rp. 100.000 Ini dalam Rupiah, dan negara yang berbeda memiliki konvensi yang berbeda untuk menampilkan nilainya.
Pertama Install Vue Currency Filter pada VueJS
1 |
npm install vue-currency-filter |
Kemudian import kedalam file main.js
1 |
import VueCurrencyFilter from 'vue-currency-filter' |
Dan gunakan plugin
1 |
Vue.use(VueCurrencyFilter) |
Konfigurasi global seperti berikut
1 2 3 4 5 6 7 8 9 |
Vue.use(VueCurrencyFilter, { symbol : 'Rp.', thousandsSeparator: '.', fractionCount: 0, fractionSeparator: ',', symbolPosition: 'front', symbolSpacing: true }) |
untuk menampilkan yaitu
1 |
<span>{{ 50000 | currency}}</span> |
File main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' import routes from './router' import { store } from './store' import VueCurrencyFilter from 'vue-currency-filter' Vue.config.productionTip = false Vue.use(VueRouter) Vue.use(VueCurrencyFilter, { symbol : 'Rp.', thousandsSeparator: '.', fractionCount: 0, fractionSeparator: ',', symbolPosition: 'front', symbolSpacing: true }) const router = new VueRouter({ routes }) new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) |
File Welcome.vue untuk menampilkan
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<template> <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto"> <div class="row"> <div v-for="product in products" :key="product.id" class="col-md-4"> <div class="card mb-4 shadow-sm"> <img class="card-img-top" src="https://www.gstatic.com/webp/gallery/4.jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">{{product.name}}</h5> <p class="card-text">{{product.price | currency}}</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Buy</button> </div> <small class="text-muted">Stock: {{product.stock}}</small> </div> </div> </div> </div> </div> </div> </template> <script> export default { name: 'Welcome', created () { this.$store.dispatch('products') }, computed: { products () { return this.$store.getters.products } } } </script> |