Vue-multiselect: Updating v-model when options are modified

[AlexRussak]

Hi there

https://jsfiddle.net/yet5ghce/

I have a select element where the options come from an ajax request. The set of options can be refreshed by the user pressing a button on the page. (In the app, the user and the application are waiting for a specific property to be set by a background process.)

When the model has been set and the options are modified, the model is not updated with the newest data.
So in the fiddle, selecting a value and then re-fetching options won't cause the v-model to updated with the newest data.

Is there a built-in way to make have the v-model refresh/update when options are changed?

The work-around I've successfully used are:

1. Update the v-model value in fetchOptions by finding it in the options array and replacing it.
2. Only track the key value, utilizing the action dispatcher on the select event to set the value and then having a computed method that returns the entire object.

Thank you!

[Zip753]

Hi @abrussak, thanks for using vue-multiselect!

The track-by value doesn't change after fetching new options, so vue-multiselect has no way of telling that the options have actually changed. Instead you could introduce an artificial id specifically for tracking options and change it every time you fetch the options. So you could have options like this in the beginning:

options: [
  { id: 0, language: 'JavaScript', library: 'Vue.js', otherProperty: null },
  { id: 1, language: 'JavaScript', library: 'Vue-Multiselect', otherProperty: null },
  { id: 2, language: 'JavaScript', library: 'Vuelidate', otherProperty: null }
]

and update the ids after fetching:

options: [
  { id: 4, language: 'JavaScript', library: 'Vue.js', otherProperty: 1 },
  { id: 5, language: 'JavaScript', library: 'Vue-Multiselect', otherProperty: 2 },
  { id: 6, language: 'JavaScript', library: 'Vuelidate', otherProperty: 3 }
]

So basically assign new unique ids to your options any time you re-fetch them and use track-by="id".

[shentao]

It should be fixed with the current changes to master. Preparing a release.