javascript - 无法在 v-for 选择菜单中渲染数组项

Question

作为 Vue.js 的新手，我正在尝试渲染这个数组:

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

进入选择菜单:

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

并将 UK 设置为默认选定项目。但菜单中仅显示 cuntries，而不是国家/地区代码。

我该如何解决这个问题？

Answer 1

要执行您想要的操作并将“UK”设置为默认值，请将“v-model”添加到您可能想要的选择中

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

然后在您的数据对象中将selected 设置为您的默认值。

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

此处修改了工作示例 -> https://jsfiddle.net/skribe/0wmnkfpz/6/