Vuetify v-select 值不返回鍵

Question

我正在嘗試從我的 v-select 中對這些數據的鍵進行 v 建模：

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

我的 v-select 和 output 看起來像這樣（這是我能得到的最接近的：

        {{ this.model[0] }}

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

問題在於，當我只想要意大利時，v-select 的值將是“IT，意大利”

我一直在嘗試尋找方法，例如使用幫助程序 function 來搜索值並返回一個鍵，但我一直不確定，想知道是否有更簡單的方法來做到這一點。 或者可能將數據轉換為新的 object。

如果有人有任何想法，我將不勝感激

Answer 1

最好從 data() 返回國家屬性（使其成為 function。）而不是遍歷 Object 條目

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]"

Answer 3

如果您使用的是 Vue-select 3.0，使用 reduce 將為您解決問題

const options = [{country: 'Canada', code: 'CA'},];

<!-- v2: using index --->
<v-select :options="options" label="country" index="code"  />

<!-- v3: using reduce --->
<v-select :options="options" label="country" :reduce="country 
=>country.code" />

您可以在他們的網站上找到有關遷移的更多信息。