# Treeview filter and selected node

**URL:** <https://discourse.nodered.org/t/treeview-filter-and-selected-node/97664>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [17 June 2025 12:08 UTC](https://discourse.nodered.org/t/treeview-filter-and-selected-node/97664 "2025-06-17T12:08:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kitori](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@kitori](https://discourse.nodered.org/u/kitori)\
**Post date:** [17 June 2025 12:08 UTC](https://discourse.nodered.org/t/treeview-filter-and-selected-node/97664/1 "2025-06-17T12:08:43Z")

</div>

Hi folks,

i try to make a Treeview for filter and selecting some hierarchical data.  
i stuck on the click part: When i select a node, i want to emit the id of the clicked node.

i also try to add a filter, but also stuck there.

[https://vuetifyjs.com/en/api/v-treeview/](https://vuetifyjs.com/en/api/v-treeview/)

> **[Dashboard 2.0: Milestones, PWA and New Components • FlowFuse](https://flowfuse.com/blog/2024/04/dashboard-milestones-pwa-new-components/#treeview-(docs))**
>
> Checkout all the great content that's been added to Dashboard 2.0 in the past few weeks and the new (in-preview) Vuetify components we've made available in UI Template nodes.

Can someone give me a hint?

Current state i a template node with this content:

```auto
<template>
    <v-treeview :items="items"    
    item-value="id"
    activatable
    @update:selected="send({payload: value})"
    @click:select="send({payload: value})"
    >
    </v-treeview>
</template>

<script>
    export default {
    data: () => ({
      items: [
        {
          id: 1,
          title: 'Applications :',
          children: [
            { id: 2, title: 'Calendar : app' },
            { id: 3, title: 'Chrome : app' },
            { id: 4, title: 'Webstorm : app' },
          ],
        },
        {
          id: 5,
          title: 'Documents :',
          children: [
            {
              id: 6,
              title: 'vuetify :',
              children: [
                {
                  id: 7,
                  title: 'src :',
                  children: [
                    { id: 8, title: 'index : ts' },
                    { id: 9, title: 'bootstrap : ts' },
                  ],
                },
              ],
            },
          ],
        }
      ],
    }),
    watch: {
        // watch for any changes of "count"
    },
    computed: {
        // automatically compute this variable
        // whenever VueJS deems appropriate
    },
    methods: {
        // expose a method to our <template> and Vue Application
    },
    mounted() {
        // code here when the component is first loaded
    },
    unmounted() {
        // code here when the component is removed from the Dashboard
        // i.e. when the user navigates away from the page
    } 
  }
</script>

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 July 2025 12:09 UTC](https://discourse.nodered.org/t/treeview-filter-and-selected-node/97664/2 "2025-07-17T12:09:21Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.