flylocal-web/components/AirportPicker.vue

<template>
  <div class="picker-wrap">
    <!-- <pre style="position: fixed; z-index: 500; right: 0; top: 7rem; font-size: 0.6rem; color: orange;">
      {{ selectedAirport }}
    </pre> -->
    <v-select
      :value="selectedAirportComp"
      label="iata"
      :options="airports"
      :filter-by="filterBy"
      placeholder="stuff"
      @input="changeAirport"
    >
      <template #no-options="{ search, searching }">
        <template v-if="searching">
          No results found for <em>{{ search }}</em>.
        </template>
        <em
          v-else
          style="opacity: 0.5;"
        >
          Start typing to search for an airport.
        </em>
      </template>
      <template #selected-option="option">
        <div class="picker-item">
          <div class="picker-item__section">
            <div class="picker-item__iata">
              {{ option.iata }}
            </div>
          </div>
          <div class="picker-item__section">
            <div class="picker-item__name">
              {{ option.name }}
            </div>
            <div class="picker-item__muni">
              {{ option.municipality }}
            </div>
          </div>
        </div>
      </template>
      <template #option="option">
        <div class="picker-item">
          <div class="picker-item__section">
            <div class="picker-item__iata">
              {{ option.iata }}
            </div>
          </div>
          <div class="picker-item__section">
            <div class="picker-item__name">
              {{ option.name }}
            </div>
            <div class="picker-item__muni">
              {{ option.municipality }}
            </div>
          </div>
        </div>
      </template>
    </v-select>
  </div>
</template>

<script>
export default {
  props: {
    airports: {
      type: [Array],
      default () {
        return []
      }
    },
    selectedAirport: {
      type: [Object],
      default () {
        return {
          iata: '',
          lat: '',
          long: '',
          icon: '',
          name: '',
          municipality: '',
          type: '',
          search: ''
        }
      }
    }
  },
  data () {
    return {
      mountains: [],
      filterBy: (option, label, search) => {
        const temp = search.toLowerCase()
        return option.search.toLowerCase().includes(temp)
      }
    }
  },
  computed: {
    selectedAirportComp () {
      return {
        iata: this.selectedAirport.iata,
        lat: this.selectedAirport.lat,
        long: this.selectedAirport.long,
        icon: this.selectedAirport.icon,
        name: this.selectedAirport.name,
        municipality: this.selectedAirport.municipality,
        type: this.selectedAirport.type,
        search: this.selectedAirport.search,
        label: this.selectedAirport.label
      }
    }
  },
  methods: {
    changeAirport (value) {
      if (value) {
        this.$emit('select-airport', value)
      } else {
        this.$emit('deselect-airport', value)
      }
    }
  }
}
</script>

<style>
html {
  color: black;
}

.picker-wrap {
  margin: 1rem;
}

.picker-wrap:last-of-type {
  margin-top: 0;
}

.vs__search {
  font-size: 3rem !important;
  padding: 0.5rem;
}

.picker-item {
  padding: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.picker-item__name {
  font-size: 1rem;
}

.picker-item__muni {
  color: blue;
}

.picker-item__iata {
  font-size: 3rem;
  margin-right: 1rem;
}
</style>