在 Vue 中保留 v-model 绑定的同时使用显示值

Question

对不起，如果这个很简单，但我就是想不通。我正在使用 Quasar Framework，但我认为这更像是一个 Vue 问题。

我有一个多选 UI 组件，以及一个我想作为选项显示的对象列表。 v-model 将绑定到当前选择的选项。

假设我想从作者列表中选择一位作者。组件调用如下所示：

<q-select
  v-model="currentAuthor"
  :options="authors"
  label="Select an Author..."
/>

问题是authors 包含对象，而不是字符串，例如

this.authors = [
  { first_name: 'Roald', last_name: 'Dahl', id: 1}, 
  { first_name: 'J.R.', last_name: 'Rowling', id: 2}, 
]

将v-model 与原始对象一起使用只会在下拉列表中显示带有值的条目

[object Object]

在每个。

我不想将作者对象数组映射到字符串数组，因为选择时，我需要每个对象的 id 属性。

如何在仍使用v-model 绑定到对象的同时为下拉菜单设置显示值（类似于${author.first_name} ${author.last_name}）？

Answer 1

使用option-value 和option-label 将选项值和标签映射到对象键。

<q-select
  v-model="currentAuthor"
  :options="authors"
  label="Select an Author..."
  option-value="id"
  :option-label="(item) => item === null ? 'Null value' : `${item.first_name} ${item.last_name}`"
/>