Vuex / Filter: preserve input value on navigation - input

Question

Does anyone know how can I select an item from my filteredResults array and display it as the input's value? Furthermore, I need that on page navigation this input value to remain the same if I refresh or navigate back and forth through the pages.
<template>
<div class="search-input relative">
<label class="block">
<span class="text-gray-700 font-bold">{{ label }}</span>
<input
type="search"
class="mt-1 p-2 block min-w-full border-0 focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 bg-transparent border-b-2 border-blue-500"
autocomplete="off"
:placeholder="placeholder"
v-model.trim="keyword"
#click="resetAirport"
>
</label>
<ul v-if="filteredResults != null" class="mt-2 absolute shadow-md rounded-lg">
<li v-for="result in filteredResults" :key="result.id" class="p-2 bg-white hover:bg-gray-100" #click="selectAirport(result)">
<NuxtLink to="/" class="block">
{{ result.icao }}, {{ result.iata }} {{ result.name }}
</NuxtLink>
</li>
</ul>
<NuxtLink :to="`/airport/LRAR`" class="text-gray-300 mt-2 text-xs text-right">Details</NuxtLink>
</div>
</template>
<script>
import { defineComponent } from '#vue/composition-api'
import { mapGetters, mapActions } from 'vuex'
export default defineComponent({
setup(props) {},
data() {
return {
keyword: '',
}
},
computed: {
...mapGetters({
getAirports: 'getAirports'
}),
filteredResults() {
if (this.keyword.length < 3) return null
return this.getAirports.filter(item => {
if (!item.icao) return false
return item.icao
.toString()
.toLowerCase()
.includes(this.keyword.toLowerCase())
})
},
},
methods: {
selectAirport: function(airport) {
this.addAirport({airport: airport, type: this.type})
this.keyword = `${airport.icao}, ${airport.iata} (${airport.city}) / ${airport.name}`
},
resetAirport: function() {
if (this.keyword != null) {
this.removeAirport(this.type)
this.keyword = ''
}
},
...mapActions([
'addAirport',
'removeAirport'
])
},
props: {
label: String,
placeholder: String,
type: String,
}
})
</script>
Here is my store:
export const state = () => ({
airports: [],
pairing: {
departure: null,
arrival: null
},
loading: false
})
export const mutations = {
SET_AIRPORTS(state, payload) {
state.airports = payload
},
SET_AIRPORT(state, { airport, type }) {
state.pairing[type] = airport
},
CLEAR_AIRPORT(state, type) {
state.pairing[type] = null
}
}
export const actions = {
addAirport({ commit }, { airport, type }) {
commit('SET_AIRPORT', { airport, type })
},
removeAirport({ commit }, type) {
commit('CLEAR_AIRPORT', type)
}
}