# ListWithDetails in vue-vanilla

**URL:** <https://jsonforms.discourse.group/t/listwithdetails-in-vue-vanilla/2404>\
**Category:** General\
**Created:** [October 28, 2024, 3:46pm UTC](https://jsonforms.discourse.group/t/listwithdetails-in-vue-vanilla/2404 "2024-10-28T15:46:53Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![daxon](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@daxon](https://jsonforms.discourse.group/u/daxon)\
**Post date:** [October 28, 2024, 3:46pm UTC](https://jsonforms.discourse.group/t/listwithdetails-in-vue-vanilla/2404/1 "2024-10-28T15:46:53Z")

</div>

After reading [this issue](https://jsonforms.discourse.group/t/rules-not-working-in-array-items/251) and [this issue](https://jsonforms.discourse.group/t/hide-show-rules-property-not-working-inside-array-nested-level/1575), I understand that to render array of objects with nested conditions, there has to be a proper details object in UI schema.

But, I am using vue-vanilla, which does not support ListWithDetails type - the only renderer supported for is ArrayListRenderer, which works great, but cant handle nested conditions. I use the default uischema provided by vue-vanilla without changing it.

Is there an easy way to get ListWithDetails working with vue-vanilla? Or maybe any other way to save in schema array items?

More precisely, with the given schema:

```auto
representative: {
                      type: 'array',
                      items: {
                        type: 'object',
                        properties: {
                          data: {
                            type: 'object',
                            properties: {
                              name: {
                                type: 'string',
                              },
                              surname: {
                                type: 'string',
                              },
                              role: {
                                type: 'string',
                                enum: [...],                             
                                runConditions: [...],
                                conditions: [...],
                              },
                              description: {
                                type: 'string',
                                hide: true,
                              },
                            },
                          },

```

I need to unhide description field when a specific role is selected, but only in the current item (right now it’s working for every item in the array).

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [October 28, 2024, 7:10pm UTC](https://jsonforms.discourse.group/t/listwithdetails-in-vue-vanilla/2404/2 "2024-10-28T19:10:01Z")

</div>

> [@daxon](#):
>
> After reading [this issue](https://jsonforms.discourse.group/t/rules-not-working-in-array-items/251) and [this issue](https://jsonforms.discourse.group/t/hide-show-rules-property-not-working-inside-array-nested-level/1575), I understand that to render array of objects with nested conditions, there has to be a proper details object in UI schema.

Hi @daxon, this is just the default behavior in React Material where we support two kinds of array rendering. Via custom renderers you can modify the default to your liking.

> [@daxon](#):
>
> But, I am using vue-vanilla, which does not support ListWithDetails type - the only renderer supported for is ArrayListRenderer, which works great, but cant handle nested conditions. I use the default uischema provided by vue-vanilla without changing it.

The Vue Vanilla array support is very generic (i.e. no specialized table rendering), so it should perfecly handle nested rules etc. Note that `conditions` and `runConditions` as they are in your schema do not exist in JSON Schema and are therefore not supported at all in JSON Forms. If these properties do have some specific meaning to you, then you need to implement this via custom renderers anyway.

> [@daxon](#):
>
> Is there an easy way to get ListWithDetails working with vue-vanilla?

`ListWithDetails` is just another renderer. We do not offer it (yet) for Vue Vanilla, so you need to implement it on your own. You can check [how the renderer for Vue Vuetify was implemented](https://github.com/eclipsesource/jsonforms/blob/08bb7df186f6e1c6d19a8942a0300ebc4b9c4628/packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue) for inspiration.

> [@daxon](#):
>
> Or maybe any other way to save in schema array items?

Not sure what you mean

> [@daxon](#):
>
> More precisely, with the given schema:
> 
> […]  
> I need to unhide description field when a specific role is selected, but only in the current item (right now it’s working for every item in the array).

That should be easily possible, what did you try?