va-tree-view node id with @click

[mariuscm]

How do I use the va-tree-view component?

When I click on a node, I want that node's id.

I've tried setting @click on the va-tree-view component.

I've tried using the customized component and setting the @click on any of the elements in the template. As a side issue (maybe related), the customization of the component doesn't work for me. I cannot add any description or another button to the node. It's like it refuses to read anything from inside the component.

[rustem-nasyrov]

Hi, @mariuscm! The selection was already implemented and we will release it in the next week or two.

As a side issue (maybe related), the customization of the component doesn't work for me. I cannot add any description or another button to the node. It's like it refuses to read anything from inside the component.

Could you please share more details on this? Maybe you can provide demo at the codesandbox? Which version of the Vuestic UI you are using now?

[mariuscm]

I had it initially set in my package.json as "vuestic-ui": "^1.5" and now changed it to "vuestic-ui": "^1.5.3" and the customization (e.g. adding description) works. So, for me to be able to grab the node's id when the user clicks on the node I'd have to wait until the next release? Is there any other way this can be achieved before that? Thanks for your work on this library!

[rustem-nasyrov]

If you have already customized tree items' contents, then I'll suggest you to add a click listener on it.

Example

<template>
  <va-tree-view :nodes="nodes" class="customizable-content">
    <template #content="node">
      <div class="d-flex align-center" @click="onNodeClick(node)">
        <va-avatar
          v-if="node.image"
          :src="node.image"
          style="margin-right: 0.5rem"
        />

        <div style="margin-right: 0.5rem">
          <b v-if="node.label" class="display-6">{{ node.label }}</b>
          <p v-if="node.description" class="text--secondary mb-0">
            {{ node.description }}
          </p>
        </div>

        <va-button
          v-if="node.hasAction"
          preset="secondary"
          icon="add"
          size="small"
          style="margin-left: auto"
        />
      </div>
    </template>
  </va-tree-view>
</template>

<script>
export default {
  name: "CustomizableContent",

  data: () => ({
    nodes: [
      {
        id: 1,
        label: "Category",
        description: "It is absolutely optional",
        expanded: true,
        children: [
          {
            id: 2,
            label: "Photo",
            description: "This item works so well with the other one.",
            image: "https://picsum.photos/100",
            hasAction: true,
          },
          {
            id: 3,
            label: "Emoji",
            description: "This item corresponds the first item perfectly.",
            image: "https://picsum.photos/100",
            hasAction: true,
          },
          {
            id: 4,
            label: "Password was updated",
            description: "This one as well.",
            children: [
              { id: 5, label: "Node" },
              { id: 6, label: "It is node also" },
            ],
          },
        ],
      },
      {
        id: 7,
        label: "Super category",
        children: [
          { id: 8, label: "Super node" },
          { id: 9, label: "Common node" },
        ],
      },
    ],
  }),

  methods: {
    onNodeClick(node) {
      alert(JSON.stringify(node));
    },
  },
};
</script>

[rustem-nasyrov]

@mariuscm, is this discussion is actual to you?

[mariuscm]

@rustem-nasyrov, thanks for your help! On v1.5.3 I could add the click listener that I needed. This discussion can be closed.