javascript - Vuetify 组合框不返回 id 而不是值

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
    v-model="editForm[key]"
    :item-text="key"
    :label="key"
    :loading="loading"
    :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 属性相关，默认情况下显然是 true。禁用它会导致 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 Prop 不能像我在这里所做的那样与多组合框设置一起使用。我无法解释为什么。我找到的解决方案是为 :items prop 的键提供自定义映射，如下所示:

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

这将允许您生成许多组合框并使用相同的脚本来获取所有组合框，同时仍然让它们按预期独立运行。