Vue.js所选选项不基于值

我有一个从API调用返回的json对象，如下所示：

"countries": [
{
  "id": 1,
  "iso": US,
  "name": "United States",
},
{
  "id": 2,
  "iso": FR,
  "name": "France",
},
{
  "id": 3,
  "iso": GB,
  "name": "United Kingdom",
},
]

mounted() {
    axios.get('your-api-call-for-countries').then(response => {
         // Assign data from ...
         this.countries = response
         // Find Object which you want to be pre selected...
         let selected = this.countries.find(i => i.iso === 'GB')
         // Use id for your v-model...
         this.country = selected.id

         // or simplier
         this.country = this.countries.find(i => i.iso === 'GB').id
    })
}

在我的vue组件中：

<select v-model="country">
    <option v-for="country in countries" :value="country.id">{{ country.name }}</option>
</select>

我当然可以

data: function () {
    country: 3
}

但是我想根据iso代码而不是id声明默认的选定值

我不想将iso更改为模型的值，因为我将把它作为post请求发送到我的API。如果我这样做，我可以解析整个json对象，从它的iso代码中找到id，但我不确定这是否是最干净的解决方案

---

谢谢

您可以在API调用后执行此操作，我想您已经在

mounted（）

中安装了它，然后在

国家/地区

中输入您需要的值

大概是这样的：

"countries": [
{
  "id": 1,
  "iso": US,
  "name": "United States",
},
{
  "id": 2,
  "iso": FR,
  "name": "France",
},
{
  "id": 3,
  "iso": GB,
  "name": "United Kingdom",
},
]

mounted() {
    axios.get('your-api-call-for-countries').then(response => {
         // Assign data from ...
         this.countries = response
         // Find Object which you want to be pre selected...
         let selected = this.countries.find(i => i.iso === 'GB')
         // Use id for your v-model...
         this.country = selected.id

         // or simplier
         this.country = this.countries.find(i => i.iso === 'GB').id
    })
}

---

我认为这是唯一的解决方案，因为您需要基于

iso

的

id

，除了从您试图选择的对象获取id之外别无选择。我还建议为您选择的国家/地区选择不同的键，因为现在它与您在for循环中使用的键重叠。在您获取国家的地方，您还可以查找您想要选择的国家的id（基于ISO代码）。这就像一个符咒，感谢代码。这也是我的想法。正如你所说，我确实有一套方法。我只是想知道是否有vue.js方法可以更改v-for中的选定选项，但这可能是这里唯一的解决方法。欢迎您。我想这是唯一的解决办法。如果你发现更简单的东西，就分享吧。祝你好运