Passing parent ID in Vuetify's treeview component to function

Question

I'm trying to use Vuetify's Treeview to display a crop disease diagnostic key. Treeview provides a prop "load-children" which runs a function if the item being expanded has an item-children property that is an empty array.

How can this be modified to pass the id of the parent to a function? At this point in the tree, we will have reached the keyed out pathogen - I want to pass its ID (e.g. ids 333, 666, 999 in the data below) to a function to load addition resources about that pathogen when it is clicked.

A typical set of my data (and the Vuetify's demo function "fetchUsers") is as follows:

export default {
    name: "key",
    data() {
        return {
          active: [],
          items: [
            {
              id: 1,
              name: 'Roots :',
              children: [
                { id: 2,
                  name: 'Seedlings',
                  children: [
                    {   id: 123,
                        name: 'Watery rot in root/stem near the soil line',
                        children: [
                          {id:333,name: 'Damping off',children: []}
                        ]}
                  ]},
                { id: 3,
                  name: 'Larger plants',
                  children: [
                    {id:124, name: 'Brown, sunken lesions near soil-line', children: [
                        {id:666,name: 'Rhizoctonia root rot',children: []}
                      ]},
                    {id:125, name: 'Soft wet rot at base of stem extending to roots', children: [
                        {id:999,name: 'Bacterial soft rot',children: []}
                      ]}
                  ]},
              ]
            },
          ]
        }
    },
    methods: {
      async fetchUsers (item) {
        return fetch('https://jsonplaceholder.typicode.com/users')
          .then(res => res.json())
          .then(json => (item.children.push(...json)))
          .catch(err => console.warn(err))
      },
    }
}

The template I'm using is

<v-treeview
:items="items"
:active.sync="active"
:load-children="fetchUsers"
activatable
open-on-click
transition

Perhaps that information is already being passed in fetchUsers(item) - if that's the case, then how can I read that info? My attempts thus far e.g.

methods: {
      async fetchUsers (item) {
        console.log('item='+item[0].id);

have triggered an error about "Cannot read property 'id' of undefined.

Thanks, Tom.

Answer 1

The information I need is being passed in "item" - item.id gives it to me, not item[0].id!