Estoy tratando de hacer un proyecto escolar en js normal, pero necesité una selección de vista de árbol con varias capas, así que terminé después de muchas búsquedas y encontré esto.
Funciona muy bien, pero lo único que parece que no puedo entender es cómo puedo cambiar su valor. Este es el código que estoy usando para implementarlo:
<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> Intenté cambiar el valor de selección de treeselect dándole una ID y usando js básico para cambiarlo, pero eso no funcionó. También pensé que dar el value de una variable y cambiar esa variable más tarde funcionaría, pero nada funcionó.
Si alguien tiene alguna sugerencia o incluso una forma mejor y más simple de agregar un menú desplegable de vista de árbol, hágamelo saber.
Hice una solución improvisada que usaré por el momento. Agregué todo el contenido del componente Vue dentro de una función con un value variable e hice que la función reemplazara el contenido de la #app con el nuevo valor.
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 } } }); }