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

Question

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

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

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

<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]

每个。

我不想将 authors 对象数组映射到字符串数组，因为当 selected 时，我需要每个对象的 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}`"
/>

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

Use a display value while preserving v-model binding in Vue

javascript

vue.js

v-model

quasar-framework