Unable to retrieve VueJs instance variable outside of main.js file

Question

Unable to retrieve VueJs instance variable outside of main.js file

I have a list of fruits saved in a file named fruit_list. The file contains the following information.

    export default {
      fruits: [
        'APPLE',
        'BANANA',
        'CHERRY',
        'GRAPE',
        'KIWI',
        'MANGO',
        'ORANGE',
        'PEAR',
        'PINEAPPLE',
        'STRAWBERRY',
        'WATERMELON'
    ]
}

In the index.js file, I imported this list and assigned it to a variable:

import fruitList from './config/fruit_list';

Vue.prototype['$fruitData'] = fruitList;

Now I am attempting to access this variable $fruits in a script called operations.js using the following code:

export const checkFruitIncluded = (fruit) => {

    const fruits = this.$fruitData.fruits;
    
    return fruits.includes(fruit);
}

This function checkFruitIncluded is then invoked from a functionality.

However, I encountered an error stating

Uncaught TypeError: Cannot read property 'fruits' of undefined

As a beginner with VueJS, any help in identifying what's lacking here would be appreciated.

javascript vue.js vue-component

Answer 1

Answer №1

When working with separate files like utils, the vue instance may not be accessible outside of the component hierarchy. One way to address this issue is by passing global data as a parameter when calling utility functions:

this.isCountryIncluded = checkCountryIncluded(this.$countryData,this.country)

Here is an example from utils.js:

export const checkCountryIncluded = (countryData,country) => {

    const countries = countryData.countries;
    
    return countries.includes(country);
}

Answer 2

When working with separate files like utils, the vue instance may not be accessible outside of the component hierarchy. One way to address this issue is by passing global data as a parameter when calling utility functions:

this.isCountryIncluded = checkCountryIncluded(this.$countryData,this.country)

Here is an example from utils.js:

export const checkCountryIncluded = (countryData,country) => {

    const countries = countryData.countries;
    
    return countries.includes(country);
}

Answer 3

Answer №2

Make sure to use the component context when calling the checkCountryIncluded function.

this.isCountryIncluded = checkCountryIncluded.apply(this, [this.country])

In order for this code to function correctly, the checkCountryIncluded function must be a regular function and not an arrow function, as arrow functions do not allow for changing the context.

export const checkCountryIncluded = function(country) {

    const countries = this.$countryData.countries;
    
    return countries.includes(country);
}

Answer 4

Make sure to use the component context when calling the checkCountryIncluded function.

this.isCountryIncluded = checkCountryIncluded.apply(this, [this.country])

In order for this code to function correctly, the checkCountryIncluded function must be a regular function and not an arrow function, as arrow functions do not allow for changing the context.

export const checkCountryIncluded = function(country) {

    const countries = this.$countryData.countries;
    
    return countries.includes(country);
}

Unable to retrieve VueJs instance variable outside of main.js file

Answer №1

Answer №2

Similar questions

The rendering of Vue-bootstrap is not functioning correctly

Utilizing 'this' in jQuery plugin parameters: A step-by-step guide

Tips on how to modify a select option in vue based on the value selected in another select

Execute the cucumber tests based on tags or run all the tests

One div takes a backseat to the other div

Having trouble retrieving array information in Javascript

Angularjs still facing the routing issue with the hashtag symbol '#' in the URL

Is there a solution to fix the issue with IE causing hover effects not to

Integrate jQuery into a Vue.js 2 project using the expose-loader plugin

"Want to know the best way to retrieve the most recent form input value using jQuery or Javascript

Encountering a connection error while running a Node.js Selenium test case on Chrome. The specific error message received is: "Error: ECONNREFUSED - Connection refused to 127.0

Implementing Ajax to insert information, however, the process is prolonged for data insertion

Transferring variables between vanilla JS and Angular 2: A guide

Transforming CSV CSS values with jQuery's CSS method: Step-by-step guide

Guide to implementing a feature where clicking on a specific section of the background image triggers a transition to another website using HTML

Vuejs - The router is not rendering the third component in the app, even though the first two components are functioning properly

Can you explain the distinction between the GenerateSW and InjectManifest choices within the vue ui pwd configuration?

The Magnificent jQuery Widget Factory's _trigger Instance

Enclose several lines of text within a border in the midst of other content

Is it possible to display data on a webpage without using dynamic content, or do I need to rely on JavaScript