Как мне перебрать массив во внешнем файле JS, используя VueJS CDN? - PullRequest
Новая
       0

Как мне перебрать массив во внешнем файле JS, используя VueJS CDN?

0 голосов
/ 19 сентября 2019

Я создал страницу, которая использует VueJs через CDN, и пытаюсь выяснить, как зациклить данные в массиве из внешнего файла JS.Я попытался импортировать данные, как показано ниже, но я получаю неопределенную ошибку в моей консоли.

Мой цикл в моем index.html такой, как показано ниже; 

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

Затем JS вконец этого index.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'
    }
];

Ответы [ 2 ]

0 голосов
/ 19 сентября 2019

В вашем файле 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
      };
    }
});

После этого вы можете зацикливаться, как хотите, ...

0 голосов
/ 19 сентября 2019

Это на самом деле не имеет ничего общего с vue, но как вы пытаетесь ввести данные.

Если вы собираетесь использовать тег script, экспорт животных не будет работать.

Если это только начало, в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...