0

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

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

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

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

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

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

4

2 回答 2

4

在修复错误之前的解决方法是将您的 v-model 作为 :key 属性添加到您的 v-select 上，如此线程中所示：https ://github.com/sagalbot/vue-select/issues/855#issuecomment -510333782

<v-select
    v-model="selected"
    :options="options"
    :key="selected"
    :reduce="op => op.id"
/>
于 2019-08-30T19:06:43.263 回答
1

Vue 在这里选择作者。这是 v3.0 中的一个错误：https ://github.com/sagalbot/vue-select/issues/855 。

如果您有一个包含很多项目的列表，那么从选项列表中查找“减少的”值可能是一项昂贵的操作，因此它是在实例化时完成的。不幸的副作用是，对组件外部的绑定值的任何更改都不会像您期望的那样下推到组件。

我会尽快在 3.1.1 中获得补丁。

于 2019-05-02T20:59:43.397 回答