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

Combining DataTables with multiple tables sourced from various JSON arrays

Trouble encountered while attempting to choose a single checkbox from within a v-for loop in Vue.js?

Steps to fix issues with Cross-Origin Read Blocking (CORB) preventing cross-origin responses and Cross Origin errors

Exploring intricate designs using HTML and Javascript

Utilizing Angular routing in HTML5 mode within a Node.js environment

Creative jQuery hover effects tailored to the size of the viewport

Is it possible to center the image and resize it even when the window is resized?

Hiding content in HTML with the Display:none property

Experiencing a problem with Datatables where all columns are being grouped together in a single row

Is there a way to set up an automatic pop-up for this?

Trying to dynamically filter table cells in real time using HTML and jQuery

Data is not appearing as expected in the React component when using the data

Encountering the issue "Error: _LoginPage.default is not a constructor"

Is there a way for me to prevent the setTimeout function from executing?

Ways to conceal the 'Return to Top' button in a script that is only revealed after navigating to the bottom of the page

Replicate the functionality of a backend API using AngularJS

A method to find the sum of the final n elements in an array by employing Arr.reduceRight

Hybrid application: Manipulate HTTP user agent header using AngularJS

Troubleshooting problem with sorting in Angular 4 material header

Tips for altering the color of a specific bar in the Material UI BarChart component