Vuetify v-select 值不返回键答案

【问题标题】：Vuetify v-select value not returning keyVuetify v-select 值不返回键
【发布时间】：2019-02-10 12:43:58
【问题描述】：

我正在尝试从我的 v-select 中的这些数据中对键进行 v-model ：

{
data: {
IT: "Italy",
PL: "Poland",
AF: "Afghanistan",
AX: "Aland Islands",
AL: "Albania"
     }
}

我的 v-select 和输出看起来像这样（这是我能得到的最接近的：

        {{ this.model[0] }}

        <v-select
        :items="Object.entries(this.items)"
        v-model="model"
        >
      </v-select>

问题在于，当我只想要意大利时，v-select 的值将是“IT，意大利”

我一直在尝试寻找方法，例如使用辅助函数来搜索值并返回键，但我一直不确定，想知道是否有更简单的方法来做到这一点。或者可能将数据转换为新对象。

如果有人有任何想法，我将不胜感激！

【问题讨论】：

标签： javascript json vue.js vuetify.js v-select

【解决方案1】：

最好从 data() 返回国家属性（使其成为函数！）而不是遍历 Object.entries

data() {
    return {
      countries: [
        {key: 'IT', name: 'Italy'},
        {key: 'PL', name: 'Poland'} // ...

      ],
      country: null
    }
  }

然后在你的模板中你可以这样使用它：

<v-select :items="countries" v-model="country" item-value="key" item-text="name"></v-select>

使用 item-value 和 item-text 属性可以判断显示的文本和当前值是什么

【讨论】：

感谢您的回答！这就说得通了！但我的数据没有密钥，我从端点获取它们。而且它们没有键控：/
我明白了。然后，您可以将国家设置为计算属性而不是数据属性。在您的请求返回数据后，您只需将其映射到我的代码中的数组

【解决方案2】：

感谢您的回答。我设法让它在没有任何辅助功能的情况下工作：

  :items="items"
  item-value="[0]" 
  item-text="[1]"

【讨论】：