nexus-timers/src/components/MapSelector.vue

<template>
  <div class="map-selector">
    <h1 class="map-selector__title">Map Selector</h1>
    <ul>
      <li v-for="map in maps"><a>{{ map.name }}</a></li>
    </ul>
  </div>
</template>

<script type="text/javascript">
  const MAPS = {
    alteracPass: {
      name: 'Alterac Pass'
    },
    battlefieldOfEternity: {
      name: 'Battlefield of Eternity'
    },
    blackheartSBay: {
      name: "Blackheart's Bay"
    },
    gardenOfTerror: {},
    HanamuraTemple: {},
    VolskayaFoundry: {},
    HauntedMines: {},
    TowerOfDoom: {},
    InfernalShrines: {},
    TombOfTheSpiderQueen: {},
    SkyTemple: {},
    DragonShire: {},
    CursedHollow: {},
    BraxisHoldout: {},
    WarheadJunction: {}
  }

  module.exports = {
    name: 'MapSelector',
    data: function () {
      return {
        maps: MAPS
      }
    }
  }
</script>