QTree Question

[jimbobleeharry]

Hi all,

I have been trying to get my Q tree select option to display more than one choice without luck.

It works fine for displaying ticking and branches.

My first post, so go easy! Here is the code which is no doubt riddled with mistakes because I am a teacher and not a coder!

<template>
<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”
:selected.sync=“selected”
:ticked.sync=“ticked”
:expanded.sync=“expanded”
/>
<div class=“col-12 col-sm-6 q-gutter-sm”>
<div class=“text-h6”>Provision to implement </div>
<div>{{ selected }}</div>

  <q-separator spaced />

  <div class="text-h6">Provision selected</div>
  <div>
    <div v-for="tick in ticked" :key="`ticked -${tick}`">
      {{ tick }}
    </div>
  </div>

  <q-separator spaced />

  <div class="text-h6">Provision branch</div>
  <div>
    <div v-for="expand in expanded" :key="`expanded -${expand}`">
      {{ expand }}
    </div>
  </div>
</div>

</div>
</template>

<script>
export default {
data () {
return {
simple: [
{
label: ‘Specalist School’,
children: [
{
label: ‘Autism’,
children: [
{ label: ‘Visual Timetable’ },
{ label: ‘Time boundary activities with a Visual Timer’ },
{ label: ‘Now and Next board’ },
{ label: ‘Open communication with the young persons name’ },
{ label: ‘Visual Cues to support key words’ },
{ label: ‘Use their passion as a motivator’ },
{ label: ‘Give them time to finish activities e.g. Talking/ Stimming/ etc.’ },
{ label: ‘Time limited exercises’ }
]
},
{
label: ‘ADHD’,
disabled: false,
children: [
{ label: ‘Time boundaried activities’ },
{ label: ‘Reduce distractions’ },
{ label: ‘Frequent feedback and opportunities to share work’ },
{ label: ‘Positive behaviour chart’ },
{ label: ‘Multiple shorter tasks’ },
{ label: ‘Frequent breaks’ },
{ label: ‘Refocusing activities’ }
]
},
{
label: ‘Learning Barriers’,
children: [
{ label: ‘Pre-teaching’ },
{ label: ‘Repeated activites’ },
{ label: ‘Identify prefered learning style / Auditory/ Kinestethic/ Visual?’ }
]
}
]
}
],
selected: ‘’,
ticked: [’’],
expanded: [’’]
}
}
}
</script>

If this makes no sense I am sorry. I need the ‘Provision to implement’ to work when more than one provision is clicked on.

Thanks in advance!

Jamie

[dobbel]

@jimbobleeharry

Please try to create a codepen.io to demo what you have until now and what the problem is, so people can help you much better.

Creating a codepen.io is very simple by extending one of Quasar’s Qtree examples:
https://quasar.dev/vue-components/tree#Basic