vuetify + v-treeview inside v-combobox item slot

Есть варианты использования treeview внутри combobox?

Мои попытки не увенчались успехом из-за того, что items combobox не воспринимает children дерева treeview...

Разметка:

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
       <v-combobox v-model="value" :items="items" label="Tree">
         <template slot="item" slot-scope="data">
          <v-treeview :items="items"></v-treeview>
        </template>
       </v-combobox>
      </v-container>
    </v-content>
  </v-app>
</div>

JavaScript:

new Vue({
  el: '#app',
  data: () => ({
    items: [
        {
          id: 1,
          name: 'Applications :',
          children: [
            { id: 2, name: 'Calendar : app' },
            { id: 3, name: 'Chrome : app' },
            { id: 4, name: 'Webstorm : app' }
          ]
        },
        {
          id: 5,
          name: 'Documents :',
          children: [
            {
              id: 6,
              name: 'vuetify :',
              children: [
                {
                  id: 7,
                  name: 'src :',
                  children: [
                    { id: 8, name: 'index : ts' },
                    { id: 9, name: 'bootstrap : ts' }
                  ]
                }
              ]
            },
            {
              id: 10,
              name: 'material2 :',
              children: [
                {
                  id: 11,
                  name: 'src :',
                  children: [
                    { id: 12, name: 'v-btn : ts' },
                    { id: 13, name: 'v-card : ts' },
                    { id: 14, name: 'v-window : ts' }
                  ]
                }
              ]
            }
          ]
        },
        {
          id: 15,
          name: 'Downloads :',
          children: [
            { id: 16, name: 'October : pdf' },
            { id: 17, name: 'November : pdf' },
            { id: 18, name: 'Tutorial : html' }
          ]
        },
        {
          id: 19,
          name: 'Videos :',
          children: [
            {
              id: 20,
              name: 'Tutorials :',
              children: [
                { id: 21, name: 'Basic layouts : mp4' },
                { id: 22, name: 'Advanced techniques : mp4' },
                { id: 23, name: 'All about app : dir' }
              ]
            },
            { id: 24, name: 'Intro : mov' },
            { id: 25, name: 'Conference introduction : avi' }
          ]
        }
      ],
      value: []
  })
})

Ответы (1 шт):

Автор решения: Не быть рабом на Руси

Вы пишите в ситнтаксисе 1.5.*, а подключаете 2.*.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      items: [
          [{
            id: 1,
            name: 'Applications :',
            children: [{
              id: 2,
              name: 'Calendar : app',
            },
              {
                id: 3,
                name: 'Chrome : app',
              },
              {
                id: 4,
                name: 'Webstorm : app',
              },
            ],
          }],
          [{
            id: 5,
            name: 'Documents :',
            children: [{
              id: 6,
              name: 'vuetify :',
              children: [{
                id: 7,
                name: 'src :',
                children: [
                  {
                    id: 8,
                    name: 'index : ts',
                  },
                  {
                    id: 9,
                    name: 'bootstrap : ts',
                  }],
              }],
            }],
          }],
        ],
      value: [],
    };
  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-main>
      <v-container grid-list-xl>
        <v-combobox v-model="value" :items="items" label="Tree">
          <template v-slot:item="{ index, item }">
            <v-treeview :items="item"></v-treeview>
          </template>
        </v-combobox>
      </v-container>
    </v-main>
  </v-app>
</div>

→ Ссылка