如何使用 VueJS CDN 遍历外部 JS 文件中的数组？

Question

我创建了一个通过 CDN 使用 VueJs 的页面，并试图弄清楚如何从外部 JS 文件中循环数组中的数据。 我尝试如下导入数据，但在控制台中出现未定义的错误。

我的 index.html 中的循环如下；

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

那么这个索引末尾的JS.html如下；

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

我的包含数组的外部 JS 文件称为 list.js；

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

Answer 1

这实际上与 vue 没有太大关系，而是您如何尝试引入数据。

如果要使用脚本标签，动物的导出将不起作用。

如果这只是开始，在 list.js 中，你可以这样做

var animals = [ ... your data ];

或者，如果您想使用 export....

将您的导出更改为

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

在您的 list.js 文件中，您必须像这样导出为 const。

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

并像这样导入它（在 your.js 文件中）：

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
      };
    }
});

之后，您可以随意循环，...

如何使用 VueJS CDN 遍历外部 JS 文件中的数组？

问题描述

2 个解决方案

解决方案1
0 2019-09-18 23:36:19

解决方案2
0 2019-09-19 00:07:08

如何使用 VueJS CDN 遍历外部 JS 文件中的数组？

问题描述

2 个解决方案

解决方案1 0 2019-09-18 23:36:19

解决方案2 0 2019-09-19 00:07:08

解决方案1
0 2019-09-18 23:36:19

解决方案2
0 2019-09-19 00:07:08