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”

我一直在尝试找出方法，例如使用辅助函数搜索值并返回键，但是我一直未定义，想知道是否有更简便的方法。或者也许将数据转换为新对象。

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

Answer 1

从data（）返回一个countrys属性（使其成为函数！）比遍历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]"

验证v选择值不返回键

2 个答案: