Cannot render array items in v-for select menu

As a newbie to Vue.js, I’m trying to render this array:

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

Into a select menu:

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

And put UK as default selected item. But instead of Country codes, just cuntries being shown in the menu.

How can I fix this?

Answer

To do what you want and set “UK” as a default add a ‘v-model’ to your select which you probably want anyway

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

Then in your data object set selected to your default value.

data(){
  return{
     countries: ["US", "UK", "EU" ],
     selected: "UK",
  }
}

Modified working example here -> https://jsfiddle.net/skribe/0wmnkfpz/6/