I have a scheduling application that includes a form for selecting both the departure city and arrival city. The app is designed for international travel only, so when a user selects a city from Hungary as the departure city, I want to exclude all Hungarian cities from the list of recommended arrival cities in the next input field. To access the database, I am using axios and the application itself was created with NuxtJs.
How can I populate the second input field with all cities except those belonging to the country of the selected departure city?
Below is the code snippet for the dropdown lists in the inputs:
<template>
<div class="dropdownList">
<label class="formLabel">{{ label }}</label>
<input
ref="dropdowninput"
v-if="Object.keys(selectedItem).length === 0"
v-model.trim="inputValue"
class="dropdown-input"
type="text"
:placeholder="placeholder"
/>
<div v-else @click="resetItem" class="dropdown-selected">
{{ selectedItem.name }}
</div>
<div v-show="inputValue && apiLoaded" class="dropdown-list">
<div
@click="selectItem(item)"
v-show="itemVisible(item)"
v-for="item in itemList"
:key="item.name"
class="dropdown-item"
>
{{ item.name }}
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
selectedItem: {},
inputValue: "",
itemList: [],
apiLoaded: false,
apiUrl:
"***"
};
},
props: ["placeholder", "label"],
mounted() {
this.getList();
this.filteredCities();
},
methods: {
filteredCities() {
let filtered = this.itemList.filter(res => res.countryCode != "ro");
return filtered;
},
getList() {
axios.get(this.apiUrl).then(response => {
this.itemList = response.data;
this.apiLoaded = true;
});
},
itemVisible(item) {
let currentName = item.name.toLowerCase();
let currentInput = this.inputValue.toLowerCase();
return currentName.includes(currentInput);
},
selectItem(theItem) {
this.selectedItem = theItem;
this.inputValue = "";
this.$emit("on-item-selected", theItem);
},
resetItem() {
this.selectedItem = {};
this.$nextTick(() => this.$refs.dropdowninput.focus());
this.$emit("on-item-reset");
}
}
};
</script>
The data stored in my database resembles the following structure: