javascript - v-select 绑定(bind)值到对象

Question

我有一个 v-select 以这种方式映射对象:

<v-select
      v-model="object"
      :items="objectsArray"
      label="Select Object"          
      item-text="name"
      item-value="id"
></v-select>

地点:

• 对象有这样的结构:{'id': 'Foo','name':'Bar'}
• 而ObjectsArray是具有相同结构的对象数组{'id': 'Foo','name':'Bar'}

事情是这样的:当初始渲染发生时，在选择中显示 name 属性时工作正常，但是当 change 对象变成一个带有所选项目的 'name' 的字符串时，即 'Bar' 。

问题: 1-如何将对象替换为所选项目的完整值，即:{'id':'Foo','name':'Bar'} 而不是仅使用项目文本属性。 2-如何仅用 id 属性替换对象，即“Foo”。

观察: 如果从 v-select 中删除 item-text。在选择上显示 [Object object]，但在更改更新对象时显示 item-value 属性，在本例中为 id。

Answer 1

1.

<v-select
      v-model="object"
      :items="objectsArray"
      label="Select Object"          
      item-text="name"
      item-value="id"
      return-object
></v-select>

1. v-model 始终反射(reflect) item-value 中定义的属性值，而不是 item-text。因此，在您的示例中，选择将显示 Bar 并且 v-model 将具有 Foo
的值