I am trying to make a school project in normal js but I required a tree view select with multiple layers so I ended up after lots of searching finding this.
It works great but the only thing I can't seem to figure out is how can I change its value. This is the code I am using to implement it:
<body>
<div id="app">
<treeselect v-model="value" @input="onInput" :multiple="true" :options="options" />
</div>
</body>
<script>
// register the component
Vue.component('treeselect', VueTreeselect.Treeselect)
new Vue({
el: '#app',
data: {
// define the default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
},
methods: {
onInput(value, id) {
console.log(value, id);//I use this to get the value selected
}
}
});
</script>
I have tried to change the treeselect value by giving it an ID and using basic js to change it but that didn't work. I have also thought that giving the value a variable and changing that variable later would do the trick but nothing worked.
If someone has any suggestions or even a better more simpler way to add a tree view dropdown please let me know.
I made a makeshift solution that I'll be using for the time being. I added all the content of the Vue component inside a function with a variable value and made the function replace the #app content with the new value.
create_treeselect(null);
function create_treeselect(value){
document.getElementById("app").innerHTML = '<treeselect v-model="value" @input="onInput" :multiple="true" :options="options" />';
Vue.component('treeselect', VueTreeselect.Treeselect)
new Vue({
el: '#app',
data: {
// define the default value
value: value,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
},
methods: {
onInput(value, id) {
console.log(value, id);//I use this to get the value selected
}
}
});
}