change treeselect vue value from js

Question

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.

score 0 · Answer 1 · answered May 03 '22 at 16:22

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
                }
            }
        });
}

change treeselect vue value from js

1 Answers1