问题标签 [vue-select]

我在我的应用程序中使用vue-select库：https ://github.com/desislavsd/vue-select 。

由于我使用了很多，我只想制作一个单独的包装器组件，但现在我的选择不起作用。Vue 不知何故无法识别道具。我怎样才能使我v-select的一个单独的可重用组件可以接受它的正常道具和工作？

这是我的选择组件：

这就是我使用它的方式：

我在Safari 的表单中遇到了 Vue Select ( https://vue-select.org/ ) 的标签索引问题。我使用 Vue Select 创建了一个简单的表单，当我从列表中选择一个元素，然后使用 Safari（版本 14.0.2）点击选项卡到下一个元素时，焦点会跳转到表单的第一个元素。这适用于 Chrome！用户不会接受这种行为，所以我被卡住了。

这是重现该问题的示例：https ://jsfiddle.net/mc5h1jf8/

这里有两个显示不同行为的动画。在这两种情况下，我单击第一个选择（表单中的第二个元素），然后按 Tab 键移动到下一个，Chrome 会跳转到下一个选择，而 Safari 会跳回第一个输入元素

铬（正确的行为）

Safari（错误行为）

关于如何解决这个问题的任何想法？

谢谢！

我想在 v-select 中使用来自 API 的响应。这是一个场景，我想使用从组件 A 到组件 B 的 API 调用，而不是在组件 B 中再次调用它。

组分 A：

B组份：

1. 如您所见，我在 v-select 中将组件 B 硬编码为“vanilla”，而不是我想使用来自 API 的数据，我想知道它是如何完成的。

这是我的 Api 回复：

2. 请帮帮我。我尝试使用label: type.flavor，但没有显示任何内容。为了使代码有效，我想使用来自组件 A 中的 API 调用的响应

我正在尝试使用 vs-select 显示选择下拉菜单，这些选项来自 API。这是我的场景，我已将所有组件动态化，我的首页有 3 张卡片，如果我单击任何卡片，则会显示相应的内容。

这是我从/my-project端点得到的响应：

这是我的代码：

如果用户点击第二张卡片，他将获得uid=2ie 在 vue-select 中的详细信息，他将获得选项为project title2. 如果用户点击第一张卡片，他将获得 uid=1 的详细信息，然后显示三个 vue-select，如图所示：

相反，我想要一个 vue-select 和三个不同的选项：

这是我的问题：我如何为来自 API 的数据提供一个单一的 vue-select，然后为它显示不同的选项。

我正在使用 vue-select。当我想显示所选元素时，它会显示值而不是文本（见屏幕）。我在几份报告（和文档）中看到了可以使用 reduce 的内容。我还看到我可以在组件上添加一个 ":key" 道具，但这也不起作用。

在这里我选择项目：

这里是选定的项目，它显示值而不是文本：（这里的问题）

我的组件文件（input-custom.vue）：

我在页面中的组件：

页面数据：

我使用这个插件https://www.npmjs.com/package/vue-select从列表中选择多个值。

让我们假设以下内容：

如果我搜索例如：“javascript”并选择前四个，我有这个

但我想要这样的东西：

或者像这样

0r 甚至这个

那可能吗？我知道还有其他插件可以做到这一点（例如：vue multiselect），但我需要用这个插件来实现它，因为其他插件缺少我需要的一些其他功能

如何更新表中动态创建的行中的字段。我将数据传递给 v-select，我想使用用户选择的相同数据。

我想要达到的目标

我正在尝试搜索产品。我正在使用 [v-select][1] 来获取产品。获取产品后，我将尝试使用产品值更新该行。

例如：在第 1 行中，如果我选择 product-sku ，我想将相应的价格分配给 item.price ，而在第 2 行中，如果我选择 product-sku1 ，我想将相应的价格分配给 item.price

我正在动态创建行。

虽然我能够获取单个产品结果。我无法将其更新为行。

我在我的项目中使用 vue-select 和制表符。我能够从 json 文件中获取数据并查看它。But when selecting the options i get an error saying " Component emitted event "option:selecting" but it is neither declared in the emits option nor as an "onOption:selecting" prop. ". 多次尝试后我无法解决此错误。下面是代码。

非常感谢您的帮助。

我需要确保当您单击一个已经处于活动状态的选项时，它会变为取消选择。

<v-select class="form-control" name="language" v-model="language" id="language" :options="['English', 'Polish']" :clearable="false" :searchable="false" :multiple="true" :closeOnSelect="false"></v-select>

照片示例

我无法在 Internet 和文档中找到这方面的信息，因此希望对您有所帮助。

所以可以说我有一个数据 - news: {id:3, name:"book", author:'author'}。并选择options: {id: 1, book: "book1"}, {id: 2, book: "book2"} 。

现在我想用 news.id 和 news.book v-bind 选项有没有办法做到这一点或为此准备好组件？