Как добавить директиву цикла for для перемещения по массиву в VueJS при использовании CLI3?

Question

Я использую Vue CLI и настроил базовую маршрутизацию для получения двух видов. Один называется Дом, а другой - Команды. Я готов добавить директиву цикла for в свой проект, чтобы просмотреть список команд. Тем не менее, я не уверен, куда это идет. Мой main.js теперь как показано ниже; В идеале массив будет в моем файле просмотра, но он также не будет работать, когда находится там. Я мог бы попытаться добавить его в Компонент, но я не могу также добавить Компонент в Представление. Любая помощь приветствуется. Кроме того, я создал CodeSandBox https://codesandbox.io/s/2wvv5k8v2n

import Vue from "vue";
import App from "./App";
import router from "./router";

Vue.config.productionTip = false;

const clubs = [
  {
    name: "Tigers",
    location: "Manchester",
    members: "22"
  },
  {
    name: "Dolphins",
    location: "Miami",
    members: "19"
  },
  {
    name: "Bleu Sox",
    location: "Paris",
    members: "13"
  }
];

const app = new Vue({
  el: "#app",
  data: {
    club: clubs
  }
});

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

Answer 1

Лучше не иметь данных в main.js.Создайте отдельную папку с именем data и импортируйте данные в раздел сценариев компонентов вашей команды и используйте их.Ниже раздвоенные и обновленные коды и коробки - это один из способов сделать это.

https://codesandbox.io/s/z6zlpk18mx