Numa
Numa

Reputation: 31

Vuejs Vetur(2349) - "This expression is not callable". I can't see what is wrong

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.

This is the error

Upvotes: 0

Views: 374

Answers (0)

Related Questions