Skip to content

Instantly share code, notes, and snippets.

@mattraykowski
Last active March 12, 2019 18:25
Show Gist options
  • Save mattraykowski/b93b095e7262a05920921cbc21620d25 to your computer and use it in GitHub Desktop.
Save mattraykowski/b93b095e7262a05920921cbc21620d25 to your computer and use it in GitHub Desktop.
<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 stations"
:key="callsign"
@click="focusMarker(callsign)"
class="button is-small station-list-item"
>{{callsign}}</button>
</div>
</div>
</template>
<style scoped>
.station-list {
display: flex;
flex-direction: column;
margin: 0.5em;
}
.station-list-item {
margin: 0.25em;
}
</style>
<script>
export default {
props: ["focusMarker"],
data: () => ({
stationFilter: ""
}),
computed: {
stations() {
// const filter = : "";
console.log(this.stationFilter.toUpperCase());
return this.$store.getters.stationCallsigns.filter(s =>
s.toUpperCase().includes(this.stationFilter.toUpperCase())
);
}
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment