How do I use an array from an external JS file in a Vue.js component?

Question

I'm trying to import an array into a Vue component:

The (simplified) component:

<script type="text/babel">
    const countryCodes = require('./country_codes.js');

    export default {
        props: [],

        data() {
            return {
                countryCodes: countryCodes
            }
        },
    }
</script>

country_codes.js

(function() {
   return ['DE', 'EN']; // This, of course, is way bigger; simplified for readability
});

Both the component and the country_codes.js files are in the same directory, but the countryCodes property is always an empty object.

What am I doing wrong?

samayo · Accepted Answer · 2018-03-05 13:49:53Z

4

I can't tell for what reason your code isn't working. Maybe you just need to export your data from countryCodes.js

So, I am sure this will work

import countryCodes from './countryCodes.js'

countryCodes.js

export const countryCodes = {
  return ['DE', 'EN'];
}

answered Mar 5, 2018 at 13:49

samayo

16.5k13 gold badges95 silver badges115 bronze badges

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

3 Comments

lesssugar Over a year ago

Thank you. That put me on the right track. Plus cour code works just fine.

Dong3000 Over a year ago

Strange. For me it shoots an error: Unexpected keyword 'return' (2:4) Any hints on that?

samayo Over a year ago

Maybe you don't have es6 support

Collectives™ on Stack Overflow

How do I use an array from an external JS file in a Vue.js component?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related