quasar-tree.vue 840 Bytes
Newer Older
schneider210's avatar
schneider210 committed
1
2
<template>
  <div class="q-pa-md q-gutter-sm">
3
    <q-tree style="cursor: pointer;"
schneider210's avatar
schneider210 committed
4
5
      :expanded.sync="expanded"
      :icon="fasCaretRight"
6
      label-key="labelKey"
schneider210's avatar
schneider210 committed
7
8
      :nodes="tree"
      node-key="label"
9
10
11
      :selected.sync="selected"
      selected-color="grey"
      text-color="black"
schneider210's avatar
schneider210 committed
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
      >
    </q-tree>
  </div>
</template>

<script>
import { fasCaretRight } from '@quasar/extras/fontawesome-v5';

export default {
  name: 'Treeview',
  props: {
    manifests: Array,
    tree: Array,
  },
  data() {
    return {
      expanded: ['The Story and Proverbs of Ahikar the Wise'],
29
      selected: null,
schneider210's avatar
schneider210 committed
30
31
32
33
34
35
    };
  },
  created() {
    this.fasCaretRight = fasCaretRight;
  },
  mounted() {
36
    this.$root.$on('update-sequence-index', (index) => {
schneider210's avatar
schneider210 committed
37
38
39
40
41
      this.expanded.push(this.manifests[index].label);
    });
  },
};
</script>