Search code examples
vue.jsvuejs2vue-multiselect

vue-form-generator & vue-multiselect: can't remove tags, duplicates them

I am using vue-form-generator with the field vueMultiselect (integration of vue-multiselect).

Adding tags works well, however deleting tags fails (clicking on x icon):

  • nothing happens when trying to delete the first existing tag
  • if you add a tag and try to delete it, a input event is emitted which duplicates tags

For instance:

  • Starts with Vue.js
  • Click x on Vue.js ==> tag remains, (BROKEN)
  • Add Rails.js ==> Vue.js, Rails.js (OK)
  • Click x on Rails.js ==> Vue.js, Vue.js, Rails.js (BROKEN)

Here is a link to reproduce the problem

enter image description here

Q: Is this failing because I misconfigured vueMultiselect (eg some options I need to set to prevent this behaviour)?

If not I'll just raise it as a bug

Versions:

  • Vue = 2.5.17
  • vue-multiSelect = 2.1.2
  • vue-form-generator = 2.3.4
Solution

  • Check out this codepen maybe this will help you.

    Fiddle - https://jsfiddle.net/73ufp4ys/

    According to this Github issue it's simply because the trackBy option was missing.