Vue: utilizing shared methods in a JavaScript file

Question

Vue: utilizing shared methods in a JavaScript file

Currently, I am building a multipage website using Vue and I find myself needing the same methods for different views quite often. I came across a suggestion to use a shared .js file to achieve this. It works perfectly when my "test method" downloadModel is a single function, but as soon as I try to split it up, I run into a TypeError: Cannot read properties of undefined(). How can I go about fixing this issue? I apologize for being relatively new in this world. :)

export default {
methods:{  
    downloadModel(id) {
        this.printMessage('Download',id)
    },

    printMessage(string,id){
        console.log(string, id)
    },

} }

javascript vue.js

Answer 1

Answer №1

Here is a simple example to demonstrate:

In your script.js file :

function displayText(text) {
    this.showMessage('Displaying', text)
}

function showMessage(action, text) {
    console.log(action, text)
}

export { displayText, showMessage };

In your index.html file (for example)

import { displayText, showMessage } from 'js/scripts.js';

Remember that you can omit exporting/importing showMessage if it is only used internally by displayText and not needed outside of the script.

Answer 2

Here is a simple example to demonstrate:

In your script.js file :

function displayText(text) {
    this.showMessage('Displaying', text)
}

function showMessage(action, text) {
    console.log(action, text)
}

export { displayText, showMessage };

In your index.html file (for example)

import { displayText, showMessage } from 'js/scripts.js';

Remember that you can omit exporting/importing showMessage if it is only used internally by displayText and not needed outside of the script.

Answer 3

Answer №2

To achieve the desired outcome, you can utilize mixins in your Vue.js components. By defining a shared function in a mixin, multiple components can incorporate this functionality as needed.

For instance:

Mixin

// mixins/shared.vue
export default {
    methods: {
        sharedFunction() {
            console.log("Hi, i'm a shared function!");
        }
    }
}

Component 1

// components/comp1.vue
import SharedFunctionMixin from '../mixins/shared.vue';

export default {
    mixins: [SharedFunctionMixin],
    
    mounted() {
        this.sharedFunction();
    }
}

Component 2

// components/comp2.vue
import SharedFunctionMixin from '../mixins/shared.vue';

export default {
    mixins: [SharedFunctionMixin],
    
    mounted() {
        this.sharedFunction();
    }
}

Answer 4

To achieve the desired outcome, you can utilize mixins in your Vue.js components. By defining a shared function in a mixin, multiple components can incorporate this functionality as needed.

For instance:

Mixin

// mixins/shared.vue
export default {
    methods: {
        sharedFunction() {
            console.log("Hi, i'm a shared function!");
        }
    }
}

Component 1

// components/comp1.vue
import SharedFunctionMixin from '../mixins/shared.vue';

export default {
    mixins: [SharedFunctionMixin],
    
    mounted() {
        this.sharedFunction();
    }
}

Component 2

// components/comp2.vue
import SharedFunctionMixin from '../mixins/shared.vue';

export default {
    mixins: [SharedFunctionMixin],
    
    mounted() {
        this.sharedFunction();
    }
}

Vue: utilizing shared methods in a JavaScript file

Answer №1

Answer №2

Mixin

Component 1

Component 2

Similar questions

Encountered a problem while trying to upload a video on bunny stream using node.js

What is the best way to capitalize the first letter of a string in JavaScript?

Unable to save data to file: ENOENT error - file not found

Tips for capturing a screenshot of the ESRI Map using Angular

Setting a default value for a select option in Angular 2

Utilizing HTML and JavaScript to add grayscale effect to images within a table, with the ability to revert to the colored version upon mouseover

Utilize JavaScript to target the specific CSS class

Finding an element based on its styling attribute, such as its position on the left or right side

Editing the object retrieved from JSON is not possible once it has been fetched

Tips for managing the submission process for dynamically generated formsORStrategies for

In Chrome, it seems like every alternate ajax request is dragging on for ten times longer than usual

Incorporate Jquery Append and Each functions into Class addition

Unable to access the POST value in the current context

Incorporate adjustable div heights for dynamically toggling classes on various DOM elements

Generate a new object from the contents of a div

Istanbul provides me with a thorough analysis, yet it always seems to conclude with an error

Tips for increasing the height of a popover when clicked

Name or Title of a Polygon/Polyhedron Using Three.js

Determine the presence of a JSON object within a file using JavaScript

Redirecting users from one page to another using Javascript along with