How to use an external array in Vue JS

Question

I've been trying to use an external array in my VueJs code, but I've been running into problems

Here's my code:

import iconsData from 'components/iconsData.js';
  export default{
    data(){
      return{
        activeIcon: '',
        icons : iconsData
      }
    },
    methods: {
      consoleIcons(){
        console.log(this.icons)
      }
    }
  }

iconsData.js is:

export const iconsData = [
   {"name": "material-icons"},
   {"name": "eva-icons"},
]

but all I get is a warning:

export 'default' (imported as 'iconsData') was not found in 'components/iconsData.js' (possible exports: iconsData)

any help is appreciated.

Answer 1

The error is tied to the import. Currently, iconsData.js exports an object { iconsData: [...] }. Thus, you need to be more specific about what exactly you are trying to import:

import { iconsData } from 'components/iconsData.js';

Alternatively, this would also work:

export default [
   {"name": "material-icons"},
   {"name": "eva-icons"},
]