Ash*_*ina 3 javascript combobox vue.js vuejs2 vuetify.js
我正在尝试为<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>
Run Code Online (Sandbox Code Playgroud)
例如:x, y使用自动完成和其他手动填充字段将返回以下错误消息:
**数组到字符串的转换(SQL:插入到table( w, x, y, z) 值 (test, 5, 4, 1)) **
在这种情况下5, 4,应该是两个字符串。
更新:
仍然没有解决,但我发现它实际上将整个项目对象发送到 POST。
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"
>
Run Code Online (Sandbox Code Playgroud)
原始解决方案:
对于将来对组合框使用同样复杂的人,我已经解决了这个问题。奇怪的是,标准: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>
Run Code Online (Sandbox Code Playgroud)
这将允许您生成许多组合框并使用相同的脚本来获取所有组合框,同时仍然让它们按预期独立运行。
| 归档时间: |
|
| 查看次数: |
7142 次 |
| 最近记录: |