nexus-timers/src/components/MapSelector.vue

<template>
  <div class="map-selector">
    <h1 class="map-selector__title">Battleground Selector</h1>
    <ul class="map-selector__map-list">
      <li class="map-selector__map-list-item" 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: {
      name: 'Garden of Terror'
    },
    HanamuraTemple: {
      name: 'Hanamura Temple'
    },
    VolskayaFoundry: {
      name: 'Volskaya Foundry'
    },
    HauntedMines: {
      name: 'Haunted Mines'
    },
    TowersOfDoom: {
      name: 'Towers of Doom'
    },
    InfernalShrines: {
      name: 'Infernal Shrines'
    },
    TombOfTheSpiderQueen: {
      name: 'Tomb of the Spider Queen'
    },
    SkyTemple: {
      name: 'Sky Temple'
    },
    DragonShire: {
      name: 'Dragon Shire'
    },
    CursedHollow: {
      name: 'Cursed Hollow'
    },
    BraxisHoldout: {
      name: 'Braxis Holdout'
    },
    WarheadJunction: {
      name: 'Warhead Junction'
    }
  }

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

<style lang="sass">
  .map-selector
    &__map-list
      list-style-type: none
      &-item
        font-size: 2rem
        padding: 10px 0 10px 5px
</style>