Question

我正在尝试制作一个充满<v-combobox>的表单，该表单对于填写表单的人基本上是自动完成的。我已经成功地做到了这一点，但是我遇到了一个奇怪的问题。当我实际选择<v-combobox>建议的项目时，它会正确填写输入。但是，当它提交表单时，它将在选项数组中而不是我选择的值中发送id。这些对我来说似乎是错误的，因为我将item-value="key"设置为与item-text="key"相同，并且文本与我想要的字符串正确，所以为什么值不正确？

<v-flex
v-for="key in inputsNames"
v-if="key !== 'id'"
:key="key"
xs12
>
<v-combobox
    :item-text="key"
    :label="key"
    :loading="loading"
    v-model="editForm[key]"
    :search-input.sync="inputSearch[key]"
    :items="searchOptions"
    :item-value="key"
    cache-items
    clearable
    prepend-icon="filter_list"
/>
</v-flex>

例如：使用自动完成功能填充x, y字段，手动填充其他字段将返回以下错误消息：

**数组到字符串的转换（SQL：插入到table（w，x，y，z）值（测试，5， 4，1））**

在这种情况下，5, 4,应该是两个字符串。

更新：

仍然没有解决，但是我发现它实际上将整个项目对象发送到了POST。

Answer 1

更新2019： 我再次调查了这个问题，终于找到了答案。它与return-object属性有关，该属性默认情况下是正确的。禁用它会使v-combobox正常工作。

<v-combobox
    :item-text="(obj) => (obj)[key])"
    :item-value="(obj) => (obj)[key]"
    v-model="editForm[key]"
    :search-input.sync="editForm[key]"
    :items="searchOptions"
    :return-object="false"
>

原始解决方案： 对于将来对组合框使用类似功能的人，我已经解决了这一问题。奇怪的是，标准:item-value道具无法与多组合框设置一起使用，就像我在这里所做的那样。我无法解释原因。我发现的解决方案是为:items道具的键提供自定义映射，如下所示：

<v-flex
    v-for="key in columns"
    v-if="key !== 'id'"
    :key="key"
    xs12
>
    <v-combobox
        :item-text="key"
        v-model="editForm[key]"
        :search-input.sync="inputSearch[key]"
        :items="searchOptions.map((obj) => (obj)[key])"
    />
</v-flex>

这将使您能够生成许多组合框，并使用相同的脚本为所有组合框提取内容，同时仍使它们按预期独立运行。

Vuetify组合框未返回ID而不是值

1 个答案: