问题标签 [vue-select]

我使用vue-select组件作为我的下拉列表，并将其:options作为要放入下拉列表的数据。我现在将它用于信用卡下拉菜单，并希望在每个下拉行中添加卡片类型图像。这可能吗？

我有一个下拉菜单，按他们的标签显示信用卡选项。标签字段的值是四个星号和卡片的最后 4 位数字，如下所示：“****4241”。

问题是，如果 2 张卡片碰巧以相同的 4 个数字结尾，它不会在下拉列表中显示它们，所以我现在通过在数组中的标签上添加一个索引值来解决这个问题。 cards = [{label: '1: ****4242'}, {label: '2: ****4242'}] 如果可能的话，我想摆脱这个黑客。

我正在从返回存储对象数组的计算方法填充下拉列表。然后在 vue-select 中，我将其作为options并option.address在下拉列表中显示。这按预期工作，但是当单击下拉选项时，该框不显示该值 - 它只是保持空白。

我正在研究客户服务 ABM。对于用户搜索，我使用 Vue Select 过滤并选择正确的客户... Vue Select 从我的客户 api 获取客户列表，然后我将数据提取到 vue select 中。用户可以过滤以获得正确的客户...

我需要知道的是当我想“编辑”服务时如何分配选定的客户端。当用户按下“服务编辑”时，模式在编辑模式下打开，它对“/service/{id}”进行 api 调用以获取服务信息。带有所有服务信息和客户 ID 的服务响应......问题是，如果我把它设置为默认选择......

这是我的 vuejs 信息：

我的 searchCustomers 函数，将数据提取到“选项”中：

新的服务模式，从 api 获取数据：

最后是我的 v-select 组件：

传递 id 并将正确的客户分配给 v-form 的正确方法是什么？

当我看到问题所在时，我确信我会踢自己，但我正在尝试使用 vue-select 来编辑所选项目中的字段。

本质上，我希望修改在组件外部传入的 v-model 并让组件更新所选项目以及视图。options 道具不会改变。

描述问题的最佳方法是使用我在代码沙箱上发布的示例 。例如，有一个包含课程名称和认证 ID 的项目列表（在现实生活中这是 mongodb objectId）。我希望能够选择其中一项，并能够通过输入（课程名称）和 v-select 进行编辑来进行认证。v-select 包含具有人类可读描述（在本例中为名称）的可用证书列表，我希望能够使用下拉框选择所需的证书并填充已编辑的项目条目。

所有这一切都很好，但是，当我单击“编辑第二个项目”时，编辑器部分会更新为所选项目的课程名称，但 vue-select 不会更新以反映不同的所选项目。

示例自动选择列表中的第一项并显示在编辑器部分，更改课程或认证会反映在项目部分的屏幕底部。单击“编辑第二项”，我希望“课程”字段更改为第 2 项，并且“认证”下拉菜单显示专业。

希望有人能在明显的事情上引导我。

我在我的项目中使用了 Vue-select 功能，并且在 v-select 元素中我想设置最大输入长度（45 个字符），但我没有这样做。我设法在后端处理了这个问题，但我想防止用户输入超出允许范围的内容。

我尝试使用属性 :maxlength="45" 但似乎它对输入长度完全没有影响。

这是我所拥有的：

正如我所说，我可以处理超过 45 个字符的输入，但我想阻止它，就像这段代码一样：https ://codepen.io/CSWApps/pen/RQbvvp ，我搜索了 vue-select文档并且无法找到限制输入长度的方法。

感谢您提前提供任何帮助。

- - - - - - - - 编辑 - - - - - - - - - - -

我尝试使用迈克尔的答案，但我仍然可以输入超过 45 个字符：

我正在使用 vue-select。我选择province_id然后创建记录成功，但是当显示记录时，我无法触发选择到select2的数据。

我正在使用Cool-Select，它需要以下代码来加载其主题：

问题是我不想为了只使用一个主题而必须导入整个 vue 代码。此外，组件在没有主题导入的情况下工作正常；只是缺少CSS。

是否可以在本地导入主题而不是components像这样的部分？

正如你在这张图片上看到的，我使用了 Vue-Select 和 Buefy Modal。我想要发生的是，如果选择有这么多会触发溢出（带有滚动）的选项超出父级的管辖范围，即您不必滚动父级的模式来查看选择的底部选项，而不是选择选项将与父项分离，您将能够在溢出时看到父项观点之外的选项。这是大多数选择/下拉元素的默认行为，但我希望有一种方法可以覆盖它。我希望它与此类似：

父级不应在子级溢出时调整大小。我尝试使用 z-index 无济于事。有没有任何 CSS hack 方法来实现这一点？

这是我的代码，没什么花哨的，只是 buefy + v-select

我删除了我的 css 更改，因为 z-index 不起作用，我不知道如何复制第二张图片上的那个。

我正在使用 VueSelect 进行地址选择。国家、州、城市有 3 个选择组件。

使用 v-model 时，使用 reduce prop 获取指定值而不是选项对象效果很好。这里我的问题是不按键值设置默认值。

我希望它像 html select 一样通过 id 设置默认值。但它按原样显示键值，不受标签值的约束。
希望你能从我的解释中理解。
期待像 vuetify 的 v-select。 验证示例