Vuetify v-select 值不返回键

Question

我正在尝试根据来自我的 v-select 的数据对密钥进行 v 建模：

{
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, Italy"，而我只想要意大利

我一直在尝试寻找方法，例如使用辅助函数来搜索值和 return 键，但我一直未定义，想知道是否有更简单的方法这个。或者可能将数据转换为新对象。

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

Answer 1

最好从 data() 中 return 一个国家属性（让它成为一个函数！）而不是遍历 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 道具，您可以确定显示的文本和当前值是什么

Answer 2

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

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

Vuetify v-select 值不返回键

Vuetify v-select value not returning key

javascript

json

vue.js

vuetify.js

v-select