The way to import a helper function into the Vuejs template

In a Vuejs app, there is a clear division between the template and script code. When you'd like to use a global function or a helper that it has imported from outside of the Vuejs file, you have to import and put it in the methods hook like the example below.

Export your helper functions: 

export const helperFunctionA = (params) => { 
	// do something
}

export const helperFunctionB = (params) => { 
	// do something
}


In the scripts of Vuejs file, import your helpers and put them into the methods hook like this: 

import { helperFunctionA, helperFunctionB }  from ‘../helper’;

export default {
/// your vuejs scripts code
  methods: {
	helperFunctionA,
    helperFunctionB,
    otherMethod(){
    	// do something
    }
  }
}


Finally, you can use the helper functions at wherever you want in the Vuejs template:


import helper to vuevue templatevuejs

Latest

R

Remove an object item from array by ID in Javascript

H

How to reverse an array in Javascript without changing the original array?

A

Auto scroll to a specify element every time open webpage by Javascript

H

How to scroll to top every time React router change?

G

Get height or width of an element in Javascript

T

The way to separate logic code of the Vuejs component into smaller files

Related

T

The way to separate logic code of the Vuejs component into smaller files

C

Create a Vuejs login page use Vuetify template and validate with vee-validate

H

How to add Google AdSense to a Vuejs app?

H

How to call the Mutations from inside the different Modules in Vuejs?

C

Create the Tooltip Component in Vuejs

© 2019 4codev

Created with love by Sil.