Show the value from the database in a select field

I get names of country, state, city from the database for a user. When I edit the profile I want to see the values I get from the database so if the user lives in United states then the country select should show United States because the value comes from the database.

The problem is the city is dependent on state and state is dependent on country so you have to select country first before you can select the state.

How can I just display the values I get from the database in the select?

I tried this:

<option
	v-for="(name, id) in states"
	:key="id"
	:value="name.id"
	:selected="profile.location.city.state"
>
	{{ name.name }}
</option>

neither does this:

<select
	id="selectState"
	name="state"
	:selected="profile.location.city.state"
	@change="getCity"
>
	<option v-for="(name, id) in states" :key="id" :value="name.id">
		{{ name.name }}
	</option>
</select>

or this

<fieldset>
	<label class="extendedLabel" for="selectCountry">Country</label>
	<select
		id="selectCountry"
		v-model="profile.location.city.country"
		@change="getState"
		name="country"
	>
		<option selected disabled value="">Countries</option>
		<option
			v-for="(name, id) in countries"
			:key="id"
			:value="name.id"
		>
			{{ name.name }}
		</option>
	</select>

Help is appreciated thanks

hello @calvincani
Can you please share your database format?

5 Likes

Thank you but this problem was solved and I am doing it another way.