如何从Vuetify的v-select组件选中项中获取完整对象？

问题复现 #

当前传入v-select的选项数组结构：

"values": [
    {
        "value_display": "Broken clouds",
        "value": "803"
    },
    {
        "value_display": "Clear sky",
        "value": "800"
    }
]

原有组件写法：

<v-select item-text="value_display" item-value="value" label="Values" v-model="rule.value" :items="rule.values"></v-select>

默认配置下{{ rule.value }}只能拿到800这类value字段值，拿不到完整选项对象。

解决方法 #

方法1：添加return-object属性（最小改动，推荐） #

v-select原生提供return-object布尔属性，添加后即使配置了item-value，v-model绑定的也会是完整的选中项对象，不需要修改原有其他配置。
修改后的组件代码：

<v-select 
  item-text="value_display" 
  item-value="value" 
  label="Values" 
  v-model="rule.value" 
  :items="rule.values"
  return-object
></v-select>

修改后rule.value存储的就是完整对象，输出结构如下：

{
  "value_display": "Clear sky",
  "value": "800"
}

方法2：手动匹配原数组（适合需要保留v-model存单值的场景） #

如果你不想改动现有逻辑，仍然需要rule.value存储800这类编码值，可以通过遍历原选项数组的方式匹配拿到完整对象，比如写一个计算属性：

computed: {
  selectedValueItem() {
    return this.rule.values.find(item => item.value === this.rule.value)
  }
}

使用{{ selectedValueItem }}即可获取到完整的选中项对象。

提示：以上写法在Vuetify 2、Vuetify 3版本中均通用，无版本兼容问题。

内容的提问来源于stack exchange，提问作者code-8