vue-multiselect icon indicating copy to clipboard operation
vue-multiselect copied to clipboard

'input' Event doesn't fire when change value programmatically

Open oleksandr-hyriavets opened this issue 5 years ago • 5 comments

Reproduction Link

https://jsfiddle.net/AlexanderHyriavets/caxfLs4u/5/

Steps to reproduce

  1. Click 'change value' button
  2. 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.

oleksandr-hyriavets avatar Jan 08 '20 14:01 oleksandr-hyriavets

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.

dwieringa avatar Jan 19 '20 01:01 dwieringa

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 avatar Jan 22 '20 14:01 dwieringa

@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)

JeroenKocyigit avatar Mar 31 '20 15:03 JeroenKocyigit

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...

AllanOricil avatar Feb 01 '21 15:02 AllanOricil

https://github.com/shentao/vue-multiselect/issues/1392

AllanOricil avatar Feb 01 '21 15:02 AllanOricil

For me , @input never triggers. @select / @remove work.

mariusa avatar Sep 21 '22 11:09 mariusa

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

TeaDrinkingProgrammer avatar Nov 09 '22 09:11 TeaDrinkingProgrammer