Sorry, HTML
<!--
Forked from:
https://quasar.dev/vue-components/tree#example--syncing-node-properties
-->
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md row q-col-gutter-sm">
<q-tree class="col-12 col-sm-6"
:nodes="simple"
node-key="label"
tick-strategy="leaf"
v-model:selected="selected"
v-model:ticked="ticked"
v-model:expanded="expanded"
></q-tree>
<div class="col-12 col-sm-6 q-gutter-sm">
<div class="text-h6">Selected</div>
<div>{{ selected }}</div>
<q-separator spaced></q-separator>
<div class="text-h6">Ticked</div>
<div>
<div v-for="tick in ticked" :key="<code>ticked-${tick}</code>">
{{ tick }}
</div>
</div>
<q-separator spaced></q-separator>
<div class="text-h6">Expanded</div>
<div>
<div v-for="expand in expanded" :key="<code>expanded-${expand}</code>">
{{ expand }}
</div>
</div>
</div>
</div>
</div>
JS
const { ref } = Vue
const app = Vue.createApp({
setup () {
return {
selected: ref('Pleasant surroundings'),
ticked: ref([ 'Quality ingredients', 'Good table presentation' ]),
expanded: ref([ 'Satisfied customers', 'Good service (disabled node)', 'Pleasant surroundings' ]),
simple: [
{
label: 'Satisfied customers',
children: [
{
label: 'Good food',
children: [
{ label: 'Quality ingredients' },
{ label: 'Good recipe' }
]
},
{
label: 'Good service (disabled node)',
disabled: true,
children: [
{ label: 'Prompt attention' },
{ label: 'Professional waiter' }
]
},
{
label: 'Pleasant surroundings',
children: [
{ label: 'Happy atmosphere' },
{ label: 'Good table presentation' },
{ label: 'Pleasing decor' }
]
}
]
}
]
}
}
})
app.use(Quasar, { config: {} })
app.mount('#q-app')
.
.
