时间戳

首页 > 解决方案 > 如何使用 VueJS CDN 遍历外部 JS 文件中的数组？

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

问题描述

我创建了一个通过 CDN 使用 VueJs 的页面，并试图弄清楚如何从外部 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'
    }
];

标签： javascriptvue.jsvuejs2

解决方案

这实际上与 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>

推荐阅读