GitHub page

Demo Vue Hierarchical Select 3

Selected: {{ selected ? selected : 'no' }}

<hierarchical-select
    :nodes="nodes"
    :selected="selected"
    :change-select="changeSelect"
    :css-classes="['uk-select', 'uk-margin-bottom']"
/>

import { createApp, ref } from 'vue'
import HierarchicalSelect from 'vue-hierarchical-select-3'

const app = createApp({
  setup() {
    const selected = ref(5)
    const nodes = ref([
      {
        name: 'test1',
        id: 1,
        children: [
          { name: 'test2', id: 2 },
          {
            name: 'test3',
            id: 3,
            children: [
              { name: 'test4', id: 4 },
              { name: 'test5', id: 5 }
            ]
          }
        ]
      }
    ])

    const changeSelect = (value) => {
      selected.value = value
    }

    return { selected, nodes, changeSelect }
  }
})

app.use(HierarchicalSelect)
app.mount('#app')