I'm working on a school project using plain JavaScript and needed a tree view select with multiple layers. After extensive searching, I stumbled upon this tool.
It's working smoothly, but the one thing that has me stumped is how to change its value. Here's the code snippet I've been using:
<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've attempted to modify the value of treeselect by assigning it an ID and using basic JavaScript to alter it, but no luck. I also tried setting the value as a variable and updating it later, but that didn't do the trick either.
If anyone has any suggestions or knows of a simpler way to incorporate a tree view dropdown, please share your insights.