0

I am sure I am going to kick myself when I see what the issue is but I am trying to use vue-select to edit field in a selected item.

Essentially I am looking to modify passed in v-model external to the component and have the component update the selected item as well as view. The options prop doesn't change.

Best way to describe issue is with example which I have posted on codesandbox In example there is an item list containing course name and certification id (in real life this is mongodb objectId). I am wanting to be able to select one of these items and be able to edit it via input (for course name) and v-select for certification. The v-select has list of available certificates with human readable description (name in this case) and I want to be able to use drop down box to select desired certificate and populate the edited item entry.

All this works fine, BUT, when I click "edit 2nd item" the editor section updates to selected item's course name but the vue-select does not update to reflect different selected item.

Example auto selects the first item on list and displays in Editor section, changing either course or Certification is reflected on bottom of screen in the Items section. Click "edit 2nd item" and I expect the Course field to change to item2 and the Certification drop down to display professional.

Hoping someone can steer me right on something obvious.

colinbes
  • 417
  • 6
  • 14

2 Answers2

4

A work around until the bug is fix is to add your v-model as a :key attribute on your v-select as seen in this thread: https://github.com/sagalbot/vue-select/issues/855#issuecomment-510333782

<v-select
    v-model="selected"
    :options="options"
    :key="selected"
    :reduce="op => op.id"
/>
Anthony Brown
  • 41
  • 2
1

Vue Select author here. This is a bug in v3.0: https://github.com/sagalbot/vue-select/issues/855.

Finding the 'reduced' value from the options list can be an expensive operation if you have a list with a lot of items, so it's done at instantiation. The unfortunate side-effect is that any changes to the bound value outside of the component don't push down to the component as you'd expect.

I'll be getting a patch out in 3.1.1 as soon as possible.

sagalbot
  • 118
  • 4