koumoul-dev / vuetify-jsonschema-form

Create beautiful and low-effort forms that output valid data. Published on npm as @koumoul/vjsf.
https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/
MIT License
538 stars 154 forks source link

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

Open FaitAccompli opened 2 years ago

FaitAccompli commented 2 years ago

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!

albanm commented 2 years ago

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 ?

FaitAccompli commented 2 years ago

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

albanm commented 2 years ago

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.

FaitAccompli commented 2 years ago

May I ask what do you mean by normal dependency?

albanm commented 2 years ago

I meant normal property, not a dependency.

FaitAccompli commented 2 years ago

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 commented 2 years ago

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?