StationList.vue

<template>
  <div>
    <p class="menu-label">Latest Callsigns</p>
    <input class="input" type="text" placeholder="Filter stations..." v-model="stationFilter">
    <div class="station-list">
      <button
        v-for="callsign in filteredStations"
        :key="callsign"
        @click="focusMarker(callsign)"
        class="button is-small"
      >{{callsign}}</button>
    </div>
  </div>
</template>

<style scoped>
.station-list {
  display: flex;
  flex-direction: column;
}
</style>

<script>
export default {
  props: ["focusMarker"],
  data: () => ({
    stationFilter: ""
   }),
  computed: {
    filteredStations() {
      return this.$store.getters.stationCallsigns.filter(s =>
        s.toUpperCase().includes(this.stationFilter.toUpperCase())
      );
    }
  }
};
</script>