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?

Answer 1

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'];
}