Question

我正在使用Vuetify输入行进行业余项目。字段之一是带有“多个”属性集的v-autocomplete字段。我需要使用v-model将此v-autocomplete绑定到对象。我该怎么做？

我尝试过：

使用v槽覆盖模板。
添加项目值和项目文本。这使其正确显示。真好！更新不起作用。 v-模型以某种方式使其成为字符串数组，而不是另存为对象。像这样：

在从列表中添加其他项目之前： https://i.imgur.com/UCrxCki.png

从列表中添加其他项目后： https://i.imgur.com/Iwro6DN.png

v模型列表不再填充有具有“动作”和“数量”道具的对象。相反，它使它成为字符串列表

代码：

模板中的代码：

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

期望

我希望它在保持模型结构的同时向阵列添加任何选择。就像读取数组一样。例如，如果我添加一个“ Probe”操作，则应如下所示创建它。金额也可以为Null /未定义，甚至完全省去。重要的是它用动作道具推动对象。

{ 动作：“探针”，数量：1 }

Answer 1

您可以在return-object上使用autocomplete道具来获取值作为对象。 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>

Vuetify <v-autocomplete> v模型对象而不是数组未正确添加

我尝试过：

代码：

期望

1 个答案: