vuetify-jsonschema-form icon indicating copy to clipboard operation
vuetify-jsonschema-form copied to clipboard

Is it possible to get the selected element property from parent?

Open FaitAccompli opened this issue 3 years ago • 7 comments

Let's say we have this setup

const schema = {
  ...
  items: {
      type: 'object',
      properties: {
          Parent: {
          type: 'string'
          title: 'Parent' 
          'x-fromUrl ' : 'https://website_name/api/data',
          'x-itemTitle': 'title',
          'x-itemKey' : 'id'
          properties: {
               id: { 
                  type: 'string'
               }
           }
        }
     }
  },
  dependencies: {
    Parent: {
      properties: {
       Child: {
            /* POINT OF INTEREST*/
        }
      }
    }
  }
}

Given the above sample code, is there a way for the child to be able to get the id of the selected element in the Parent? I'm trying to prefill that field with the result of this 'x-fromUrl ' : 'https://website_name/api/data/{parent.value.Parent.id}

Thank you so much!

FaitAccompli avatar Feb 24 '22 12:02 FaitAccompli

I don't precisely understand the setup, I suppose it should be ok. If you can't make it work maybe you can provide a codepen so that I can help ?

albanm avatar Feb 24 '22 12:02 albanm

Hi @albanm,

Thank you for the swift response. I'm not really familiar with setting up things on codepen. I guess I'll try to explain it instead. Let's say we have a drop down which contains a list of clients so to visualize we have:

clients = [ A, B, C]

The clients dropdown was populated from an HTTP request.

[
  {
       id: 1,
       name: A,
  },
  {
       id: 2,
       name: B,
  }
  {
       id: 3,
       name: C,
   }
]

clients has another field that depends on it (child) called clientDetails. Is it possible for me to be able to get the selected id from clients and use it in my API call in clientDetails? So I can prefill that field

For some reason, "some_path/{parent.value.clients.id}" doesn't work.

I used this codepen as reference: https://codepen.io/pen?&editors=101

FaitAccompli avatar Feb 24 '22 13:02 FaitAccompli

Does it work if your don't define clientDetails as a dependency but as a normal dependency.

Every example in the doc has a link to open it in codepen, you can then edit it to make it fit your problem, save and share the link.

albanm avatar Feb 24 '22 13:02 albanm

May I ask what do you mean by normal dependency?

FaitAccompli avatar Feb 24 '22 13:02 FaitAccompli

I meant normal property, not a dependency.

albanm avatar Feb 24 '22 13:02 albanm

There's no problem if it's a normal property, if we list all the clientTypes.

x-fromUrl: 'some_path/clientTypes'

However, there's a problem when I use this path. No data is available. Running that same path on postman works.

x-fromUrl: 'some_path/clientTypes/2025'

2025 basically is just the id so I can get more info on that client.

FaitAccompli avatar Feb 24 '22 13:02 FaitAccompli

Hi I was able to get this working.

By using the x-itemKey in the url instead of parent.value.clients.id.

Instead of some_path/{parent.value.clients.id}

Use some_path/{clients}

If your x-itemKey: id, clients here is the id already.

@albanm, I just noticed that this doesn't fit well with my use case. I want to be able to use the other key-value pair from the result I get from x-fromUrl.

so if let's say I did this : 'x-fromUrl': 'somepath/clients' and get this as a response

[ { clientId: 1, clientName: 'client_1' clientContact: '1234' }, { clientId: 2, clientName: 'client_2' clientContact: '1234' } ... ]

If I chose the first object in this array of objects on the dropdown for clientName property. Is it possible for me to use the same object as the default value for another property (clientContact) that is a dependency?

FaitAccompli avatar Feb 28 '22 07:02 FaitAccompli