JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<html>

  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
    <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
  </head>

  <body>
    <div id="app">
      <treeselect v-model="value" :multiple="true" :options="selectOptions" @open="openForBiz" />
    </div>
  </body>

</html>

JavaScript

Vue.component('treeselect', VueTreeselect.Treeselect)

new Vue({
  el: '#app',
  data: {
    value: null
  },
  computed: {
    selectOptions: function() {
      return [...Array(10).keys()].map(i => {
        return {
          id: i,
          label: `Option ${i}`
        }
      })
    }
  },
  methods: {
    openForBiz(id) {
      console.log(id)
    }
  }
})