How do I get the value from sibling of selected option and pass it as value in inputfield autofill (VueJS) - vue.js

Question

Flow of my app:
user types a city
user select a country code in select
then submit
But the problem is that when someone types 'ams' instead of 'amsterdam' it will also output a list of responding country codes. If someone select one and then click on the submit button. It will give an error that the this.city is undefined. The reason for this is because the url that is fetched consists variables of this.city and this.country_code. Something looks like www.weatherbit.com/${this.city}=country${this.country_code} and that is the reason why it gives an error in this case. So in order to avoid that I want to get the autofill option if the this.city is not a valid city name. When someone clicks on country code 'NL' and the city name is undefined (not matching the entire city name) it will autofill the input field with that. In order to do so it needs to get the 'country.city_name' and pass it to v-model="city". How can I do that.
<select v-model="countryCode" #change="handleChange">
<option v-for="(country, index) in checkCountryName" :key="index" :value="country.country_code" :selected="index === 0">
{{ country.city_name}} // only this value should be output in input /// and should not be in option element
{{ country.country_code }} // only this should be shown in option if this is undefined
</option>
</select>
<input v-model="city" placeholder="Please enter your location...">
data () {
return {
city: '',
cityList: [],
countryCode: null,
errors: []
}
},
mounted () {
axios.get('https://gist.githubusercontent.com/chiholiu/9243c14cd7f310c0866947414496ad99/raw/8f97404080b3812477004793e2318552fc876aa2/cities.json')
.then(response => {
this.cityList = response.data
})
},
computed: {
checkCountryName () {
if(this.city.length < 1) return;
return this.cityList.filter((cityName) => {
return cityName.city_name.toLowerCase().match(this.city.toLowerCase())
})
}
},

Answer 1

There are few options to achieve this scenario.
Option 1: Enter full city name
Instead of match, find the city the user typed is fully matching the city_name. This will give you the full city name when you call the api.
Option 2: Change the input value
Once the user typed the half word like ams and select a country, at handleChange event in select, you can set the city_name to city like
methods: {
handleChange(e) {
this.city = e.target.value.city_name
}
}