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>