How can I render PrimeVue Tree items as links?

Question

I'm making a tree with primevue and I'm having trouble accessing values of the child objects, here is my code:

<Tree :value="nodes"></Tree>

setup() {
      let name = 'chris'
      let age = 19
      let nodes = [
            {
              key: 0,
              label: "test1",
              children: [
                  {key: 0-0, label: "test0.1", data:"https://www.google.com", type: 'url'},
                  {key: 0-1, label: "test0.2", data:"https://www.google.com", type: 'url'},
                  {key: 0-2, label: "test0.3", data:"https://www.google.com", type: 'url'},
                  {key: 0-3, label: "test0.4", data:"https://www.google.com", type: 'url'}
              ]
            },
            {
              key: 1,
              label: "test2",
              children: [
                  {key: 1-0, label: "test1.1", data:"https://www.google.com", type: 'url'},
                  {key: 1-1, label: "test1.2", data:"https://www.google.com", type: 'url'},
                  {key: 1-2, label: "test1.3", data:"https://www.google.com", type: 'url'},
                  {key: 1-3, label: "test1.4", data:"https://www.google.com", type: 'url'}
              ]
            },
            ]

      return {name, age, nodes}
  },

I would like to be able to click on the tree items and have them take me to the link specified in data. What should I do?

Answer 1

Tree supports a url slot that allows you to specify how to render the tree items. Use that slot to render an a tag for each child:

<template>
  <Tree :value="nodes">
    <template #url="{ node }">
      <a :href="node.data">{{ node.label }}</a>
    </template>
  </Tree>
</template>

demo