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.

Does this answer your question? Export default was not found — Zsolt Meszaros
– Zsolt Meszaros, Commented Dec 21, 2021 at 10:32

Nicolas Forstner · Accepted Answer · 2021-12-21 10:37:31Z

3

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"},
]

edited Dec 21, 2021 at 10:37

Nicolas Forstner

5003 silver badges13 bronze badges

answered Dec 21, 2021 at 10:24

Vincent Le Calvez

463 bronze badges

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

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to use an external array in Vue JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related