How do I loop through an array in an external JS file using VueJS CDN?

Question

I have created a page which uses VueJs via the CDN and am trying to figure how to loop the data in an array from an external JS file. I have tried to import the data as below, but I get an undefined error in my console.

My loop in my index.html is as below;

        <ul>
            <li v-for="animal in animals">
              {{ animal.type }}
            </li>
        </ul>

Then the JS at the end of this index.html is as follows;

<script src="js/list.js"></script>
var app = new Vue({
    router: router,
    el: '#app',
    data() {
      return {
        animals: animals
      };
    }
});

Thne my external JS file containing the array is called list.js;

export animals [
    {
        type: 'Cat'
    },
    {
        Type: 'Dog'
    }
];

Answer 1

This really doesn't have much to do with vue, but how you are trying to bring in the data.

If you are going to use the script tag, the export of animals won't work.

If this is just to get started, in list.js, you could just do

var animals = [ ... your data ];

Or if you want to use export....

change your export to

export const animals = [
    {
        type: 'Cat'
    },
    {
        Type: 'Dog'
    }
];

 <html lang="en"> <head> <meta charset="UTF-8" /> <div id="testapp"> <ul> <li v-for="animal in animals"> {{ animal.type }} </li> </ul> </div> </head> <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="module"> import {animals} from "/scripts/list.js" var app = new Vue({ el: '#testapp', data() { return { animals: animals }; } }); </script> </body> </html>

Answer 2

In your list.js file, you must export as const, like this.

export const animals = [
    {
        type: 'Cat'
    },
    {
        Type: 'Dog'
    }
]

And import it like this (inside your.js file):

import { animals } from 'js/list.js'

var app = new Vue({
    router: router,
    el: '#app',
    data() {
      return {
        animals: animals //you can use animal in data like this
      };
    }
});

After that you can loop as you like,...