如何预填充选择？

【问题标题】：How to pre-populate a Select?如何预填充选择？
【发布时间】：2018-01-18 16:55:17
【问题描述】：

我想用一些值预填充一个 Select 组件（来自 Vuetify.js）。

我使用异步版本，在这里我可以得到可选数据

[
  {
    text: "hello",
    value: {
      type: "word",
      language: "english"
    }
  },
    {
    text: "bonjour",
    value: {
      type: "word",
      language: "french"
    }
  }
]

在选择时，它们作为对象数组存储在v-model 中（上面建议选择的value）。

我想用一些默认条目（比如上面的法语条目）预先填充搜索字段，以便：

搜索字段中的“bonjour”
{type: "word",language: "french"} in v-model

有没有办法用 Vuetify 做到这一点？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

:items 保存选项列表。

v-model 保持选中的选项列表。

因为你的可选数据不仅仅是一个字符串数组，而是一个对象数组，你应该告诉 vuetify 哪个属性是值，哪个是这些对象中的标签属性 item-text(text) 和 item-value(value .english) 属性。

所以 vue 可以匹配 v-model 和 :items 来找到被选中的。

所以要选择english，你的v-model应该是这样的：

[
   {
     text: "hello",
     value: {
        type: "word",
        language: "english"
    }
]

你的选择组件应该有：

<v-select ... :item-value="value.language" :item-text="text"></v-select>

【讨论】：