Vuetify <v-autocomplete> v-model 对象而不是数组无法正确添加

Question

我正在用行中的 Vuetify 输入字段做一个爱好项目。其中一个字段是带有"多个"道具集的 v-autocomplete 字段。我需要使用 v 模型将此 v 自动完成绑定到对象。 我该怎么做？

我试过：

• 使用 V 槽覆盖模板。
• 添加项目值和项目文本。这使它正确显示。好！但是更新不起作用。不知何故，v-model 使其成为字符串数组，而不是另存为对象。这样：

从列表中添加额外项目之前： https://i.stack.imgur.com/wbx8h.png

从列表中添加额外项目后： https://i.stack.imgur.com/oEKDv.png

v-model 列表不再填充具有其"动作"和"数量"道具的对象。相反，它使其成为字符串列表

法典：

模板中的代码：

<v-layout wrap v-for="(row, index) in rows" :id="index+1 + 'buildorderRow'" v-bind:key="index">
<v-autocomplete
v-model="row.actions"                                          
:items="protoss"
chips                                            
item-value="action"
item-text="action"
multiple
>
</v-layout>

绑定到 v 模型的数组：

actions: [
{
action: 'Gateway',
amount: 5
},
{
action: 'Pylon',
amount: 1
},
],

期望

我希望它在保持模型结构的同时将任何选择添加到数组中。就像读取数组一样。例如，如果我添加"探测"操作，它应该创建如下所示。金额也可以为空/未定义，甚至完全省略。重要的是它用动作道具推动对象。

{ 操作："探测"， 数量： 1 }

Answer 1

您可以在autocomplete上使用return-objectprop 来获取作为对象的值。return-object更改选择行为以直接返回对象，而不是使用 item-value 指定的值。

<v-layout wrap v-for=“(row, index) in rows” :id=“index+1 + ‘buildorderRow’” v-bind:key=“index”>
<v-autocomplete
v-model=“row.actions”
:items=“protoss”
chips
item-value=“action”
item-text=“action”
multiple
return-object
>
</v-layout>