Using js helper function from parent and child component

Question

I have a parent component (say, CustomerOrder) and a child component (say OrderLine). In CustomerOrder.vue, I will be including multiple OrderLine by iterating over an array. I have a helper js function that I need to use in both CustomerOrder and OrderLine. I can import this js file in CustomerOrder and call the js function. But I cannot import the js file in OrderLine because it gives an error (vue.runtime.esm.js?2b0e:1888 TypeError: _vm.formatNumber is not a function) when the function is being called. My requirement is to use the helper js function from parent and multiple children of the same type.

CustomerOrder.vue:

<template>
    <span class="caption">{{ formatNumber(1500) }} LKR</span>
    <v-layout wrap>
      <order-line v-for="line in orderLines" :key="line.id" :general_data="line"></order-line>
    </v-layout>
</template>

<script>
    import { formatNumber } from '../utils'
</script>

OrderLine.vue:

<template>
    <span class="caption">{{ formatNumber(2300) }} LKR</span>
</template>

<script>
    import { formatNumber } from '../utils'
</script>

vue.runtime.esm.js?2b0e:1888 TypeError: _vm.formatNumber is not a function is raised when formatNumber in OrderLine is called. Is it because

FYI:

utils.js:

import Numbro from 'numbro'

export function formatNumber (value, numberOfDecimals) {
  return Numbro(value).format({
    thousandSeparated: true,
    trimMantissa: true,
    mantissa: numberOfDecimals
  })
}

Could you include the code where you use the imported formatNumber? Just importing it isn't enough to make it available in your template, it would need to be included somewhere within the <script> section, e.g. in methods. — skirtle
– skirtle, Commented Jul 8, 2019 at 17:21
I use import { formatNumber } from '../utils' to import the js in both the components as I have shown above and am using it as formatNumber(1500) and formatNumber(2300) as shown above as well — Lakmal Premaratne
– Lakmal Premaratne, Commented Jul 8, 2019 at 17:26
CustomerOrder.vue and OrderLine.vue are located in the same directory, correct? — Nick G
– Nick G, Commented Jul 8, 2019 at 17:31

tony19 · Accepted Answer · 2022-07-15 01:36:40Z

2

You should add (define) formatNumber in methods like

methods: {
  formatNumber
}

otherwise you can't use it in template

Also you can check https://v2.vuejs.org/v2/guide/filters.html and add formatNumber to filters instead of methods. Then use in template like {{ 2300 | formatNumber }}

edited Jul 15, 2022 at 1:36

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 8, 2019 at 17:43

Emīls Gulbis

2,0711 gold badge12 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Lakmal Premaratne Over a year ago

I am new to Vue and am learning. Could you please advise me as to how to use a helper function across the application without duplicating the code?

Emīls Gulbis Over a year ago

If you want to use this filter across the application, then you should add it to filters where you define your Vue app - new Vue(...

Abdelillah Aissani Over a year ago

he doesn't have to add it in his methods .... i've used many functions by just importing ... i think the issue is somewhere else

Lakmal Premaratne Over a year ago

I just followed your link and it seems I can use filters... anyway if there are a lot of filters like this, can I move them to a separate file? just asking this since I think I'll run into it in the near future... :)

Emīls Gulbis Over a year ago

Sure, you can create filters file where exporting multiple filters and then import all at once and set to filters

|

Collectives™ on Stack Overflow

Using js helper function from parent and child component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related