如何在 vuetify 中正确使用 select？

Question

我目前正在使用 vuetify，目前下面的代码正在运行 <v-select>。

<v-select
    :items="order_by_opt"
    v-model="order_column"
    label="Order By"
    outlined
></v-select>

//script
data() {
    order_by_opt: ["Last Added", "Name", "Year Joined", "Age", "Date of Birth", ..etc.],
    order_column: ''
}

我只想问一下我们如何将下面的html代码翻译成v-select

<select>
    <option value="last_added">Last Added</option>
    <option value="name">Name</option>
    //more options here
</select>

其中标签和值不同，如下例所示。如果我 select Last Added，那么我应该得到值 last_added?

Answer 1

您可以通过提供对象数组来做到这一点，例如文档中的 this example。 props定义了哪个选项属性代表选中的值，哪个是显示值

如何在 vuetify 中正确使用 select？

How to properly use select in vuetify?

vue.js

vuetify.js

v-select