Share state between Cell Renderer and Control Renderer

General
1

I have the following issue of which I am wondering how to solve:

I have a set of cell renderers: StringCell, NumberCell, BooleanCell, DateCell, etc.

Then I have a set of Control renderers for instance DefaultControlRenderer, which dispatch a cell (DispatchCell component). This works great. However I want to control the error state: I want to show the error state only after an input is touched. The Control renderer which contains the Wrapper component (Form Item wrapper, containing a label and a container including the error text), needs to know if the underlying Cell has been touched. I need some sort of state which is only in scope for the form that records which fields are touched and which are not. Is there any suggestion how to solve this? I am using Vue 3.

2

Hi @jdwit, that’s an interesting use case.

From the top of my head you should be able to support this via provide/inject. For example provide a isTouched: () => void method in your renderers, and then inject and call it within the cells.

This can also be stacked as provide respects the component hierarchy and more nested provides will override the parent provides.