Multiple istances of same ui:widget

[BossHogg97]

Hi, i'm working with vue3 and Naive-UI.

I'm trying to use a component as ui:widget multiple time in the same form. I know that for distinguish the various istances i have to use :key=value. But i don't know how to use it in this case where the component definition is inside schemaUI.

Following an example of schemaUI:

schemaFactoryUI.value = {
  catalogStand: {
     catalogData: {
      "ui:options": {
        onChange({ curVal }) {
          // Do stuff on dropdown change
          loadStandFields(curVal, schemaFactory, factoryData, hand);

            // Set inside pinia Store the currentId
            currentCatalogId.value = curVal

            // The event is received inside ui:widget
            evtGetStandData.emit()
        },
      },
    },
    catalogDetails: {
      "ui:widget": shallowRef(catalogDetailsVisualizer)
    },
  },
  bearingRadial: {
     catalogData: {
        'ui:options': {
          onChange({ curVal }) {
           // Do stuff on dropdown change
            loadBearingRadialFields(curVal, factoryData)

            currentCatalogId.value = curVal
            evtGetBearingData.emit()
          },
        },
      },
    catalogDetails: {
      "ui:widget": shallowRef(catalogDetailsVisualizer)
    },
  },
};

The "evtGetStandData" event is inside ui:widget and is used for update data. The current problem is that when I emit an event it is received by all instances. I would like to have separate instances.

Thanks

[lljj-x]

CatalogDetailsVisualizer component add instanceName prop, Use different instancename parameters to distinguish by evtGetStandData emit

Ui Schema:

schemaFactoryUI.value = {
  catalogStand: {
     catalogData: {
      "ui:options": {
        onChange({ curVal }) {
          // Do stuff on dropdown change
          loadStandFields(curVal, schemaFactory, factoryData, hand);

            // Set inside pinia Store the currentId
            currentCatalogId.value = curVal

            // The event is received inside ui:widget
            // ++ Add an instanceName parameter
            evtGetStandData.emit({
              instanceName: 'instance2'
            })
        },
      },
    },
    catalogDetails: {
      "ui:widget": shallowRef(catalogDetailsVisualizer),
      "ui:instanceName": 'instance2' //++ CatalogDetailsVisualizer component define instanceName props
    },
  },
  bearingRadial: {
     catalogData: {
        'ui:options': {
          onChange({ curVal }) {
           // Do stuff on dropdown change
            loadBearingRadialFields(curVal, factoryData)

            currentCatalogId.value = curVal
            evtGetBearingData.emit()
          },
        },
      },
    catalogDetails: {
      "ui:widget": shallowRef(catalogDetailsVisualizer),
      "ui:instanceName": 'instance1'
    },
  },
};

CatalogDetailsVisualizer component:

{
  props: ['instanceName', 'anything'],

  evtGetStandDataOnEmit(payload) {
    if(payload?.instanceName === this.instanceName) {
      dosomething(...)
    }
  }
}

[BossHogg97]

Thanks for the answer and help. Everything is working fine