Question

我创建了一个页面，该页面通过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'
    }
];

Answer 1

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

Answer 2

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

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

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

2 个答案: