Unable to display elements from an array in the dropdown menu generated by v-for

Question

Having just started learning Vue.js, I am facing a challenge in rendering the following array:

       countries: ["US", "UK", "EU" ]

I want to display this array in a select menu:

<select>
  <option disabled value="">Your Country</option>
  <option v-for="(index, c) in countries" :key="index">{{ c }}</option>
</select>

In addition, I need to set UK as the default selected item. However, instead of country codes, I want to display just cuntries in the menu.

Any suggestions on how I can resolve this issue?

Answer 1

Answer №1

For customization and setting "UK" as the default, simply add a 'v-model' to your select element, which is likely recommended anyways.

<select v-model="chosenCountry">
  <option v-for="(country,index) in availableCountries" :key="index" >{{ country }}</option>
</select>

In your data object, initialize chosenCountry with the default value "UK".

data(){
  return{
     availableCountries: ["US", "UK", "EU" ],
     chosenCountry: "UK",
  }
}

Check out a modified working example here -> https://jsfiddle.net/skribe/0wmnkfpz/6/

Answer 2

For customization and setting "UK" as the default, simply add a 'v-model' to your select element, which is likely recommended anyways.

<select v-model="chosenCountry">
  <option v-for="(country,index) in availableCountries" :key="index" >{{ country }}</option>
</select>

In your data object, initialize chosenCountry with the default value "UK".

data(){
  return{
     availableCountries: ["US", "UK", "EU" ],
     chosenCountry: "UK",
  }
}

Check out a modified working example here -> https://jsfiddle.net/skribe/0wmnkfpz/6/

Answer 3

It seems like there may be a mistake in the order of index and c in your code. The correct syntax should be:

<option v-for="(c, index) in countries" :key="index">{{ c }}</option>

Answer 4

It seems like there may be a mistake in the order of index and c in your code. The correct syntax should be:

<option v-for="(c, index) in countries" :key="index">{{ c }}</option>