繁体   English   中英

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

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

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我创建了一个页面,该页面通过CDN使用VueJ,并试图弄清楚如何从外部JS文件循环数组中的数据。 我尝试按以下方式导入数据,但在控制台中收到未定义的错误。

我在index.html中的循环如下所示;

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

然后,index.html末尾的JS如下所示;

<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'
    }
];
2 个回复

确实,这与vue没有太大关系,但与您尝试引入数据的方式有关。

如果您要使用脚本标签,则无法导出动物。

如果这只是开始,请在list.js中进行

var animals = [ ... your data ];

或者,如果您要使用导出...。

将您的导出更改为

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> 

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

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

然后像这样导入它(在.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
      };
    }
});

之后,您可以随意循环播放...

4 VueJS 遍历对象中的数组?

如何遍历对象中的数组? 我希望实现的是这个 这是我的代码,很简单,它目前以正确的顺序输出索引,但我想要的是数组的值! 我在任何地方都找不到关于这个特定问题的任何信息,所以我想我做错了,我不应该在对象中创建一个数组,如果是这种情况,请向我解释我应该如何正确构建我的值。 我是 vueJS 的新手, ...

5 在VueJs中遍历数组

在遍历Vue中的数组时,我需要帮助。 数据结构(来自数据库)是蔬菜的列表,每种情况均根据其属和普通名以及该属的特定ID进行标识。 [{"genus":"Allium","name":"Garlic","id":19}, {"genus":"Allium","name":"Leek","i ...

2019-03-01 05:23:05 1 53   vue.js
6 如何使用数组和strtok PHP遍历外部文件

我正在陷入无限循环。 我相信我在同一行输入中读取了多次,而不是转到下一行。 根据我的想法,我需要在while循环结束上方的另一段代码移至下一段。 我需要使用strtok进行此操作,我的问题是怎么做? 更新:必须使用前环,不得爆炸/爆炸。 “包含文件为bbs_2013invent ...

7 VueJS - 直接从模板调用外部 JS 文件中的函数

假设在一个 VueJS 项目中,我有一个像这样的 HelloWorld.js 文件: 它是从 HelloWorld.vue 中使用的,如下所示: 我的痛苦来自不得不在 HelloWorld 组件的方法部分中“复制” addNumbers 函数。 是否有一种简单的方法可以使模板部分中的外部 ...

9 在Angular 5中使用Webpack从CDN加载JS文件

我正在为其中一个项目使用Angular 5 + Webpack。 现在,我想从CDN用JS文件(包括延迟加载的.chunks.js文件)加载所有资产。 对于CSS和图像,我已经改变了publicPath中的选项webpack所以我能够从CDN加载CSS和图像,但问题是JS文件。 对 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM