Error "Tom Select already initialized on this element" / Access already initialized TomSelect? #260
Replies: 4 comments 5 replies
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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:
Questions:
I stumbled over https://vue-multiselect.js.org/ but didn't take a closer look. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
Maybe we need a new page at https://tom-select.js.org/docs/vue.js? |
Beta Was this translation helpful? Give feedback.
-
when will done documentation for use on vue3 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 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 Hope this may help ;) EDIT on 2022/08/06: Updated links to a specific commit as TomSelect is not used in the project anymore |
Beta Was this translation helpful? Give feedback.
-
|
Simple fix for Rails/Stimulus/Tom-Select/Vue Vue Stimulus controller Simple form (Rails) |
Beta Was this translation helpful? Give feedback.
-
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 gettingI 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.Beta Was this translation helpful? Give feedback.
All reactions