Cannot access VueJs instance variable from outside main.js file

Question

I have a country list that is saved as a configuration file country_list. The file has the following contents.

    export default {
      countries: [
        'AUSTRALIA',
        'AUSTRIA',
        'BELGIUM',
        'BRAZIL',
        'BULGARIA',
        'CANADA',
        'CHINA',
        'CROATIA',
        'CYPRUS',
        'CZECHIA',
        'DENMARK',
        'ESTONIA',
        'FINLAND'
    ]
}

Now in the main.js file I am importing it and set it as an instance variable

import countryList from './config/country_list';

Vue.prototype['$countryData'] = countryList;

Now I am trying to access this variable $countries in a file called utils.js like the following :

export const checkCountryIncluded = (country) => {

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

and this checkCountryIncluded is called from a component.

But here I am getting an error Uncaught TypeError: Cannot read property 'countries' of undefined

I am new to VueJS and it will be helpful if someone can point out what is missing here.

Try import * as countryList ? Otherwise you can also do export const countries = [ ... ]; then import { countries } from './config/country_list'; — Jeremy Thille
– Jeremy Thille, Commented Jul 9, 2021 at 9:37
I think you need to show where you are writing the const countries =... line — Djave
– Djave, Commented Jul 9, 2021 at 9:41
I am using it in a utils.js file. I need to import main.js file here ? — Happy Coder
– Happy Coder, Commented Jul 9, 2021 at 9:47
the function in utils.js file which uses const countries = this.$countryData.countries when do you call it? — Boussadjra Brahim
– Boussadjra Brahim, Commented Jul 9, 2021 at 10:00

Boussadjra Brahim · Accepted Answer · 2021-07-09 10:20:35Z

1

In separated files like utils the vue instance is not available, it's only available in the components hierarchy, the solution is to pass that global data as parameter when you call your utility function :

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

utils.js :

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

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

answered Jul 9, 2021 at 10:20

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Comments

Igor Moraru · Accepted Answer · 2021-07-09 11:26:30Z

0

You can call checkCountryIncluded with the component context.

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

For this to work, the function should be a normal function (non-arrow) since you cannot change the context of arrow functions.

export const checkCountryIncluded = function(country) {

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

edited Jul 9, 2021 at 11:26

answered Jul 9, 2021 at 11:10

Igor Moraru

7,7491 gold badge15 silver badges28 bronze badges

Collectives™ on Stack Overflow

Cannot access VueJs instance variable from outside main.js file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related