Error "Tom Select already initialized on this element" / Access already initialized TomSelect?

[ThomasLandauer]

How can I access an already existing TomSelect? https://tom-select.js.org/docs/api/ only shows ways to create a new one. But when I do new TomSelect('#foo', {});, I'm getting

"Error: Tom Select already initialized on this element"

I think this is the same question that #211 asks ;-)

My use case:
I'm binding my <select> to Vue.js, and when I change the value in Vue.js, the TomSelect widget isn't refreshed. More precise: The selected value is only visible in the list after I expanded the widget.

[oyejorge]

I'm not a vue user but this works in vanilla js:

var select = document.getElementById('#my-select');
new TomSelect(select);
var instance = select.tomselect; // existing TomSelect instance

[ThomasLandauer]

It looks like Vue and TomSelect are fighting against each other :-)

Sample code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tom Select</title>
        <link href="https://cdn.jsdelivr.net/npm/tom-select@2.0.0-rc.5/dist/css/tom-select.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/tom-select@2.0.0-rc.5/dist/js/tom-select.complete.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    </head>
    <body>
        <main>
            <select id="products" multiple="multiple" v-model="products">
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
            </select>
            <button type="button" v-on:click="update()">Update</button>
        </main>
    <script>
        new Vue({
            el: 'main',
            data: {
                products: [],
            },
            methods: {
                update: function() {
                    this.products.push('Two');
                    console.log(document.getElementById('products').selectedOptions.length);                    
                    setTimeout(function(){
                        console.log(document.getElementById('products').selectedOptions.length);                    
                        let select = document.getElementById('products');
                        let instance = select.tomselect;
                        instance.refreshItems();
                        instance.focus(); // Just to check if `instance` is working at all ;-)
                    }, 1000);
                },
            },
        });
        new TomSelect('#products', {});
    </script>
    </body>
</html>

My observations:

1. Vue.js doesn't update the selectedOptions property of the <select> immediately, but only after some delay. That's why I included setTimeout. The first console.log() always outputs "0", but the second (after the timeout) writes "1".
2. "Vue.js devtools" (see links below) are showing: Immediately after clicking the button, the entry appears in Vue's data: products:Array[1]. But after the timeout (i.e. when TomSelect kicks in), this gets reset to products:Array[0].
3. The TomSelect widget is never showing the selected option.

• https://addons.mozilla.org/de/firefox/addon/vue-js-devtools/
• https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Questions:

1. Is refreshItems() the right function here, or would you recommend something else?
2. How is TomSelect keeping track of the selected options? Obviously not in the "standard" way of adding a selected attribute to the <option>...
3. And where is refreshItems() getting the information (about what's selected) from? Obviously not from the same place where Vue.js is writing to ;-)

I stumbled over https://vue-multiselect.js.org/ but didn't take a closer look.

[oyejorge]

https://jsfiddle.net/am7wLgb3/

[ThomasLandauer]

Works, thanks! Since this is the second Vue.js-related issue (after #256), I'd like to add this somewhere to the docs. But where? Extra page for "Known Issues"? Or "Vue.js"? Or "JavaScript Frameworks"? Or add it to some existing page? Which?

[oyejorge]

Maybe we need a new page at https://tom-select.js.org/docs/vue.js?

[smerchkz]

Works, thanks! Since this is the second Vue.js-related issue (after #256), I'd like to add this somewhere to the docs. But where? Extra page for "Known Issues"? Or "Vue.js"? Or "JavaScript Frameworks"? Or add it to some existing page? Which?

when will done documentation for use on vue3
plz

[WilliamStam]

would be great! im trying to get it to work with vue3 at the moment.

would suggest a "integrations" page then when the react / angular / whatevers Q's come in a page can just be added.

[mtancoigne]

I created a TomSelect component for my app. It does not use a select but only the text field.

TL;DR: TomSelect is available as TomSelect global variable in the page, and used in vue's created() method.

Links: Component and usage example

There are custom tag renderers which clutter the component, but it acts as an input field that can be used with v-model and an array of strings.

Hope this may help ;)

EDIT on 2022/08/06: Updated links to a specific commit as TomSelect is not used in the project anymore

[ghost]

Simple fix for Rails/Stimulus/Tom-Select/Vue

Vue

watch: {
    yourObject: {
      handler(){
        setTimeout(() => {
          document.querySelectorAll('select.tomselected').forEach((input) => {
            input.tomselect.sync();
          });
        }, 50); // Needs some delay because the actual <select> value must be updated prior calling sync()
      },
      deep: true
    }
  }

Stimulus controller

  connect() {
    if (this.element.classList.contains('tomselected')) return;

    loadTomSelect(this.element);
  }

Simple form (Rails)

<%= f.association :profession,
  as: :select,
  collection: policy_scope(Profession),
  input_html: { data: { controller: "tom-select" }, "v-model": "person.professionId" }
%>