如何在Vuetify中实现v-select标签与值分离的正确用法？

嗨，这事儿超简单，咱们只需要把原来的纯字符串数组改成对象数组，再给v-select指定对应的显示字段和绑定值字段就行啦！

步骤1：修改data中的选项数组 #

把原来的字符串列表，改成每个元素包含「显示文本」和「对应值」的对象结构：

data() {
  return {
    order_by_opt: [
      { text: "Last Added", value: "last_added" },
      { text: "Name", value: "name" },
      { text: "Year Joined", value: "year_joined" },
      { text: "Age", value: "age" },
      { text: "Date of Birth", value: "date_of_birth" }
      // 其他选项按照这个格式继续添加即可
    ],
    order_column: ''
  }
}

步骤2：更新v-select组件 #

给v-select加上item-text和item-value属性，分别对应对象里的显示文本字段和实际绑定值字段：

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

效果说明 #

这样设置之后，当你选择下拉框里的「Last Added」时，order_column就会自动拿到对应的值last_added，完全和你原来的原生select逻辑一致～

如果不想用text和value作为字段名，也可以自定义，比如把对象改成{ label: "Last Added", key: "last_added" }，然后把v-select的item-text设为"label"，item-value设为"key"就行，灵活得很！

内容的提问来源于stack exchange，提问作者アリ・ナディム