Cannot render array items in v-for select menu

Question

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?

Yes, but never mind, that's another story that I've resolved. — Babr
– Babr, Commented Sep 14, 2018 at 11:02

skribe · Accepted Answer · 2018-09-14 10:51:19Z

1

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",
  }
}

answered Sep 14, 2018 at 10:51

skribe

3,6254 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Please modify your answer above rather than putting it in comments.

tony19 · Accepted Answer · 2022-07-15 00:58:17Z

1

I believe you have the order of index and c flipped. It should be:

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

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 14, 2018 at 10:31

KJ789

741 silver badge5 bronze badges

@Babr then you have something else wrong. KJ789's answer should work. See here jsfiddle.net/skribe/0wmnkfpz/2

Alright, perhapas there is some typo in my original array. In any case How can I put UK as defaut here?