Access element in ObjectElement with dot syntax

[jefffairson]

Hello,

I'm pretty new to this library and I read a lot of a doc to get answers by myself but I'm stuck with this one.
I have a form which look like this :

<Vueform
      ref="form$"
      v-model="data"
      class="register-form"
      sync
    >
      <ObjectElement
        name="team"
        :schema="teamSchema"
      />
      <ObjectElement
        name="members.0"
        :schema="memberSchema"
      />
      <ObjectElement
        name="members.1"
        :schema="memberSchema"
      />
</Vueform>

Each ObjectElement contains a button to save the appropriate section, all data are stored in a Pinia store.
The data sync with pinia is working great !

According to the doc, I subscribed to the "saveTeam" button using this syntax :
form$.value.el$('team.saveTeam').on('click', () => console.log('OK--//'))
Which is working fine.

But when I tried to do this :
form$.value.el$('members.0.saveMember')
The element is "undefined"

What I am missing here ?

Thanks for your help,
JF

[adamberecz]

You cannot have . in an element name. If you're looking to add multiple team members, it's recommended to use ListElement instead:

<Vueform
  ref="form$"
  v-model="data"
  class="register-form"
  sync
>
  <ObjectElement
    name="team"
    :schema="teamSchema"
  />
  <ListElement
    name="members"
    :object="memberSchema"
  />
</Vueform>

Than, you can use form$.value.el$('members.0.saveMember').

[jefffairson]

Thank for the tip ! Works like a charm.