Lists & Treeviews

List

Select Items from an Array in your Model

// List
model: {
      listObject: [
        { line: 1, name: 'Jobs' },
        { line: 2, name: 'Taleb' },
        { line: 3, name: 'Harari' }
      ],
      listString: [
        'Jobs',
        'Taleb',
        'Harari'
      ]
    }
}
  
schema: { 
  listObject: {
      type: "list",
      label: "List Single Object",
      item: "name",
      model: 2
   },
   listString: {
      type: "list",
      label: "List Multiple",
      multiple: true,
      model: [ 1, 2 ]
   }
 }

More Informations to Vuetify List-Item-Groups find here.

Example Online

Treeview

Work with a defined model-tree and get result of selected item in schema property model

// Treeview: 
schema: { 
    ctrl: { 
      type: 'treeview',
      open: [],      // array of open nodes
      model: [],     // array of selected items
      activatable: true,
      selectable: true,
      multipleActive: true,
      activeClass: 'blue lighten-3 blue--text',
      selectedColor: 'blue'
    }, 
    ... 
}

More Informations to Vuetify Treeview find here.

Code Sample

const treeview = [
  {
    id: 1,
    name: 'Philosoph :',
    children: [
      { id: 2, name: 'Yuval Harari' },
      { id: 3,
        name: 'Nicholas Taleb',
        children: [
          { id: 4, name: 'Black Swan' },
          { id: 5, name: 'Skin in the Game' }
        ] }
    ]
  },
  {
    id: 6,
    name: 'Visionaire :',
    children: [
      { id: 7, name: 'Yuval Harari' },
      { id: 8, name: 'Steve Jobs' },
      {
        id: 9,
        name: 'Elon Musk',
        children: [
          { id: 10, name: 'Tesla' }
        ]
      }
    ]
  }
]

export default {
  name: 'Treeview',
  components: { VFormBase },
  data () {
    return {
      myModel: {
        treeview_1: treeview,
        treeview_2: treeview
      },
      mySchema: {
        treeview_1: {
          type: 'treeview',
          col: 6,
          open: [],
          model: [],
          activatable: true,
          selectable: true,
          multipleActive: true,
          activeClass: 'blue lighten-3 blue--text',
          selectedColor: 'blue'
        },
        treeview_2: {
          type: 'treeview',
          col: 6,
          open: [],
          model: [],
          activatable: true,
          activeClass: 'red lighten-4 red--text',
          selectedColor: 'red',
          openOnClick: tru
        }
      }
    }

Example Online