在外部更改 v-model 道具时更新 vue-select 组件答案

【问题标题】：Updating vue-select component when changing v-model prop externally在外部更改 v-model 道具时更新 vue-select 组件
【发布时间】：2019-09-15 11:45:29
【问题描述】：

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

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

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

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

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

希望有人能在显而易见的事情上引导我。

【问题讨论】：

标签： vue-select

【解决方案1】：

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

<v-select
    v-model="selected"
    :options="options"
    :key="selected"
    :reduce="op => op.id"
/>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：