vue-multiselect
vue-multiselect copied to clipboard
'input' Event doesn't fire when change value programmatically
Reproduction Link
https://jsfiddle.net/AlexanderHyriavets/caxfLs4u/5/
Steps to reproduce
- Click 'change value' button
- See console
Expected behavior
Emits 'input' when the value changes
Actual behavior
Does not emit 'input' event when the value changes
Description of the 'input' event in docs says: Emitted after this.value changes. But in this particular case it is not the truth.
Maybe the resolution should be to change the documentation to state "Emitted after this.value is changed by user action." I am currently relying on the fact that this event only fires on user actions.
https://github.com/shentao/vue-multiselect/issues/1191 is related. When using :taggable="true", the addTag event handler you provide is responsible for updating the value.
See https://vue-multiselect.js.org/#sub-tagging
The event handler should add the received tag to both the options list and the value.
@dwieringa & @alexhyriavets Have you found a workaround for this by any chance?
Edit:
In case anyone is wondering if you set the ref attribute on the multiselect element
you can use the following after you set the value in programmaically to trigger the input event.
this.$refs.multiselectReference.$emit("input", your value)
for some reason now the jsfiddle works. How is that possible? I have the same version in my app and it does not work there. I read the entire source code and there is one emit('input') when multiselect detects the value has changed. But it emits [] or null That is really weird, by the way...
https://github.com/shentao/vue-multiselect/issues/1392
For me , @input never triggers. @select / @remove work.
For people wondering why @input doesn't work on next/Vue 3: this is because of a Vue 3 change) that is not reflected in the vue-mutliselect docs. TLDR: change @input to @update:modelValue or @update:model-value to get it to work again