Reputation: 31
I am currently struggling with a Vuejs component and a mixing. The main idea is to have a mixing that given a certain number, it formats the number as a price. Here is the code:
Component:
<template>
<p class="mb-0">
<span class="text-alpha-80 fw-300">{{ fullPrice }}</span>
<span class="text-alpha-30 fw-500">{{ price.currency }}</span>
</p>
</template>
<script lang="ts">
import Vue from 'vue'
import currencyMixin from '@/mixins/currencyMixin'
export default Vue.extend({
name: 'PriceCard',
mixins: [currencyMixin],
props: {
price: {
type: Object,
default: () => {},
required: true
}
},
computed: {
fullPrice(): string {
const price = this.formatCurrency(this.price.value)
return price
}
}
})
</script>
Mixin:
import Vue from 'vue'
const currencyMixin = Vue.extend({
methods: {
$_getThousands(i: string, j: number, thousands: string): string {
return (j ? i.substr(0, j) + thousands : '')
},
$_getAfterThousands(i: string, j: number, thousands: string): string {
return i.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + thousands)
},
$_getDecimals(amount: number, i: string, decimalCount: number, decimal: string = ','): string {
const aux = Math.abs(amount - parseInt(i)).toFixed(decimalCount).slice(2)
return decimalCount ? decimal + aux : ''
},
formatCurrency(amount: number, decimalCount: number = 0, decimal: string = ',', thousands: string = '.'): string {
const sign = '$ '
const stringAmount: string = Math.abs(amount || 0).toFixed(decimalCount)
const i: string = parseInt((stringAmount)).toString()
const j: number = i.length > 3 ? i.length % 3 : 0
return (
sign +
this.$_getThousands(i, j, thousands) +
this.$_getAfterThousands(i, j, thousands) +
this.$_getDecimals(amount, i, decimalCount, decimal)
)
},
},
})
export default currencyMixin
Vue.js version is: 2.6.14
The code works but I am getting this message and I can't figure out what is the problem.
Upvotes: 0
Views: 374