Issues integrating Selectize into Vue applications, even with Vue2 Component

[CristianHG2]

• [x] Search for if my issue has already been submitted
• [x] Make sure I'm reporting something precise that needs to be fixed
• [x] Give my issue a descriptive and concise title
• [ ] Create a minimal working example on JsFiddle or Codepen (or gave a link to a demo on the Selectize docs)
• [x] Indicate precise steps to reproduce in numbers and the result, like below

I am trying to integrate Selectize's "tagging" feature into my Vue application, but I just keep running into a lot of problems. Right now the main problem is the fact that Selectize is not reactive to the value of the original element that is used to instantiate Selectize.

This causes v-model not to work when the parent sets the value from Vue using v-model. If I use the value attribute directly from the parent this does not work either. If I make a workaround and modify the value property from the child using a property watcher it also does not work; even if I modify the value directly of the element it doesn't work.

I've tried using addItem, modifying the items array directly, modifying the value and re-initializing (Only worked every now and again and it was just a pretty bad UX overall), I tried using callbacks (Both onInitialize and on('initialize', fn), neither of them were triggered) to add the elements after initialization, I checked the source code of my Selectize distribution in itself and ensured that the triggers and callbacks were working, and I even were as far as to set up a bunch of setIntervals to detect when the item was initialized in order to attempt to add items to it.

I also tried using refreshItems after changing the aforementioned values of course, which also didn't work.

Nothing worked

I tried looking through the issues and couldn't find any information on Vue incompatibility, but I might've missed something. Using vue2-selectize also didn't help since this specific component was made for dropdowns, not for tagging. I tried modifying that component's source code however and still couldn't get it to work properly.

I am also using Webpack but based on the previous issues I've seen I'm not experiencing the issue due to webpack, since I'm able to initialize and interact with it just fine, the problem is adding items from the parent.

Steps to reproduce:

1. Use NPM to install selectize
2. Create a Vue component, initialize selectize on mounted
3. Add a value property on the component to make v-model work on the parent
4. Use your newly created component on another Vue component and test it
5. It might work with the first set of values
6. Attempt to change the value of the child component from the parent

Expected result:

value attribute is changed directly or indirectly, which causes the tags to be rendered.

Actual result:

value is changed in Vue and in the DOM, but nothing is rendered.

[isneezy]

Hello @CristianHG2, I've been through the same issues, while i was building the vue implementation of the Tabler UI, You might try my package vue-selectize! Its not finished yet but it works already and contributions are always welcome :wink:

[CristianHG2]

@isneezy I will definitely check it out, on the meantime, I was able to make a small working example but just for the tagging feature of Selectize. Feel free to implement it on your component if you'd like:

Gist (TagsField.vue)

[risadams]

closing stale issues older than one year. If this issue was closed in error please message the maintainers. All issues must include a proper title, description, and examples.