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

Question

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

---

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

Answer 1

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.